javascript - 在菜单展开时旋转箭头，而不是在动画结束时旋转箭头

Question

只要我单击，菜单就会展开，然后箭头会旋转。我想要的是单击后菜单应该展开并且箭头应该平行旋转。我怎样才能做到这一点？

$(document).ready(function() {
  $(".r-product-page #menu > li > a").click(function() {
    $('ul.sub-menu').not($(this).siblings()).slideUp("slow").parents('.product-menu').removeClass('active');
    $(this).siblings("ul.sub-menu").slideToggle("slow", function() {
      if ($(this).parents('.product-menu').hasClass('active')) {
        $(this).parents('.product-menu').removeClass('active')
      } else $(this).parents('.product-menu').addClass('active');
    });
  });
  $(".r-product-page #menu #one").click(function() {
    $(".product-container").load("productOne.html");
  })
});

.r-product-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.r-product-page #menu {
  height: 100%;
  width: 300px;
}

.r-product-page #menu .product-menu {
  color: #4d4d49;
  font-size: 18px;
}

.r-product-page #menu .product-menu .sub-menu {
  display: none;
}

.r-product-page #menu .product-menu .sub-menu li {
  color: #898989;
  font-family: 18px;
}

ul {
  list-style: none;
}

.product-menu .dropdown-arrow {
  transition: transform .2s;
}

.product-menu.active .dropdown-arrow {
  transform: rotate(180deg)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="r-product-page container">
  <ul style="margin-top:5rem;" id="menu">
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">template A</a>
      <ul class="sub-menu">
        <li>x</li>
        <li>y</li>
        <li>z</li>
        <li>l</li>
        <li>m</li>
        <li>n</li>
      </ul>
    </li>
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">Template B</a>
      <ul class="sub-menu">
        <li><a href="#">3.1</a>
        </li>
      </ul>
    </li>
    <li class="product-menu" id="one"><a href="#">Template C</a>
    </li>
    <li class="product-menu"><a href="#">Template D</a>
    </li>
    <li class="product-menu"><a href="#">Template E</a>
    </li>
    <li class="product-menu"><a href="#">Template F</a>
    </li>
  </ul>

  <div class="product-container" />
</div>

Answer 1

问题是因为您在动画的回调中切换类，所以它发生在动画结束时。只需将该逻辑移至外部 click 事件处理程序即可。

另请注意，您可以通过调用 toggleClass() 来简化整个 if 条件。试试这个:

$(document).ready(function() {
  $(".r-product-page #menu > li > a").click(function() {
    var $a = $(this);
    $('ul.sub-menu').not($a.siblings()).slideUp("slow").closest('.product-menu').removeClass('active');
    $a.closest('.product-menu').toggleClass('active');
    $a.siblings("ul.sub-menu").slideToggle("slow");
  });
  
  $(".r-product-page #menu #one").click(function() {
    $(".product-container").load("productOne.html");
  })
});

.r-product-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.r-product-page #menu {
  height: 100%;
  width: 300px;
}

.r-product-page #menu .product-menu {
  color: #4d4d49;
  font-size: 18px;
}

.r-product-page #menu .product-menu .sub-menu {
  display: none;
}

.r-product-page #menu .product-menu .sub-menu li {
  color: #898989;
  font-family: 18px;
}

ul {
  list-style: none;
}

.product-menu .dropdown-arrow {
  transition: transform .2s;
}

.product-menu.active .dropdown-arrow {
  transform: rotate(180deg)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="r-product-page container">
  <ul style="margin-top:5rem;" id="menu">
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">template A</a>
      <ul class="sub-menu">
        <li>x</li>
        <li>y</li>
        <li>z</li>
        <li>l</li>
        <li>m</li>
        <li>n</li>
      </ul>
    </li>
    <li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
      <a href="#">Template B</a>
      <ul class="sub-menu">
        <li><a href="#">3.1</a></li>
      </ul>
    </li>
    <li class="product-menu" id="one"><a href="#">Template C</a></li>
    <li class="product-menu"><a href="#">Template D</a></li>
    <li class="product-menu"><a href="#">Template E</a></li>
    <li class="product-menu"><a href="#">Template F</a></li>
  </ul>

  <div class="product-container" />
</div>