Как переключить преобразование CSS с помощью jQuery?

Question

Я пытаюсь повернуть значок стрелки SVG, когда пользователь нажимает на раскрывающееся меню. Мой код работает в Codepen. Но когда я тестирую его в Chrome, значок не вращается, когда вы нажимаете. Я использую последнюю версию Chrome. Что случилось?

HTML:

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <symbol id="icon-search" viewBox="0 0 32 32"> 
     <title>search</title> 
     <path class="path1" d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path> 
    </symbol> 
    <symbol id="icon-circle-down" viewBox="0 0 32 32"> 
     <title>circle-down</title> 
     <path class="path1" d="M32 16c0-8.837-7.163-16-16-16s-16 7.163-16 16 7.163 16 16 16 16-7.163 16-16zM3 16c0-7.18 5.82-13 13-13s13 5.82 13 13-5.82 13-13 13-13-5.82-13-13z"></path> 
     <path class="path2" d="M9.914 11.086l-2.829 2.829 8.914 8.914 8.914-8.914-2.828-2.828-6.086 6.086z"></path> 
    </symbol> 
    </defs> 
</svg> 
<header> 
    <div class="dropdown"> 
    <h1>Bloomberg</h1> 
    <svg class="icon icon-circle-down" id="down-arrow"><use xlink:href="#icon-circle-down"></use></svg> 
    </div> 
    <svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg> 
</header> 
<nav> 
    <h3 class="nav-category">Homepage</h3> 
    <h3 class="nav-category">Bloomberg<span id="markets">Markets</span></h3> 
    <ul class="nav-list"> 
     <li><a href="#">Stocks</a></li> 
     <li><a href="#">Currencies</a></li> 
     <li><a href="#">Commodities</a></li> 
     <li><a href="#">Rates + Bonds</a></li> 
     <li><a href="#">Economics</a></li> 
     <li><a href="#">Magazine</a></li> 
     <li><a href="#">Benchmark</a></li> 
     <li><a href="#">Watchlist</a></li> 
     <li><a href="#">Economic Calendar</a></li> 
    </ul> 
    <h3 class="nav-category">Bloomberg<span id="technology">Technology</span></h3> 
    <ul class="nav-list"> 
     <li><a href="#">U.S.</a></li> 
     <li><a href="#">Global</a></li> 
     <li><a href="#">Startups</a></li> 
     <li><a href="#">Cybersecurity</a></li> 
     <li><a href="#">Digital Media</a></li> 
     <li><a href="#">Bloomberg Technology TV</a></li> 
     <li><a href="#">Hello World</a></li> 
     <li><a href="#">Studio 1.0</a></li> 
    </ul> 
</nav> 

CSS:

header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1em; 
    background-color: #2800D8; 
    color: #fff; 
} 

.dropdown h1, 
.dropdown .icon-circle-down { 
    display: inline; 
    vertical-align: baseline; 
} 

.dropdown h1 { 
    margin: 0; 
} 

.dropdown .icon-circle-down { 
    margin: 0 0.5em; 
    transition: transform .2s ease-out; 
} 

.rotate { 
    transform: rotate(180deg); 
} 

.icon { 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    fill: #fff; 
} 

.icon-search { 
    width: 1.25em; 
    height: 1.25em; 
} 

nav { 
    padding: 0 1em 1em 1em; 
    border-right: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    display: none; 
} 

.nav-category { 
    margin: 0; 
    padding: 1em 0; 
    border-bottom: 1px solid #ccc; 
} 

#markets { 
    color: #FB8E1E; 
} 

#technology { 
    color: #00C88A; 
} 

.nav-list { 
    margin: 0.25em 0; 
    padding: 0; 
    list-style: none; 
    display: flex; 
    flex-wrap: wrap; 
} 

.nav-list li { 
    width: 50%; 
} 

.nav-list a { 
    display: block; 
    padding: 0.5em 0; 
    text-decoration: none; 
    color: #868686; 
    font-weight: bold; 
} 

JQuery:

$(document).ready(function() { 

    $(".dropdown").click(function() { 
    $("nav").slideToggle("fast"); 
    $("#down-arrow").toggleClass("rotate"); 
    }); 

}); 

Answer 1

Это отлично работает в моем браузере. Если вы не получите его, то совместимость с браузером. Поэтому попробуйте ввести код для всех стандартов, таких как

.rotate { 
    -ms-transform:rotate(180deg); /* IE 9 */ 
    -webkit-transform:rotate(180deg); /* Chrome, Safari, Opera */ 
    transform:rotate(180deg); 
}