Jquery 无法为事件链接以外的其他对象旋转下拉箭头

Question

$(document).ready(function() {

  $(".r-product-page #menu > li > a").click(function() {
    $('ul.sub-menu').not($(this).siblings()).slideUp("slow");
    $(this).siblings("ul.sub-menu").slideToggle("slow", function() {
      $(this).siblings('.dropdown-arrow').css({
        'transform': 'rotate(180deg)'
      })
    });
  });

  $(".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;
}

<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>

更多信息，

我的 jsfiddle演示在这里

在这里，我想做的是，当用户点击任何带有下拉箭头的菜单时，它应该关闭过去的打开菜单并将下拉箭头旋转 180 度。

现在，我可以关闭非事件链接的子菜单，但我无法将非事件链接的下拉箭头旋转 180 度。那我应该怎么做呢？

Answer 1

您可以将active类添加到product-menu并使用css处理transformation。

$(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>