jquery - 如何使用 jQuery 切换 CSS 转换？

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);
}