javascript - 选择其他项目时删除切换类

Question

在我的移动网站上，我有一个垂直下拉菜单(如 Accordion )，其中每个父项都有一个向下的箭头来指示下拉菜单。当用户单击父项时，箭头会旋转，当您再次单击它以关闭下拉菜单时，它会旋转回原始状态。但是，如果您不单击下拉列表将其关闭，而只是单击另一个父项，则下拉列表将关闭，但箭头仍保持在旋转位置。这是代码:

$('li.nav-about').click(function () {
        $('#arrow-about').toggleClass("rotate");
        $(this).find('ul').toggle();
    });

$(' li.nav-industry').click(function () {
        $('#arrow-indusrty').toggleClass("rotate");
        $(this).find('ul').toggle();
    });

$('li.nav-application').click(function () {
        $('#arrow-application').toggleClass("rotate");
        $(this).find('ul').toggle();
    });

有什么建议如何在单击另一个项目时删除“旋转”类吗？

编辑标记如下所示:

<ul id="nav-list">

   <li class="nav-list_item nav-about"><a href="#">About Us</a><div class="arrow-down" id="arrow-about"></div>
  <ul>
    <li>....</li>
    <li>...</li>
    <li>...</li>
  </ul>
</li>


<li class="nav-list_item nav-products"><a href="#">Products</a><div class="arrow-down" id="arrow-products"></div>

  <ul>
    <li>....</li>
    <li>...</li>
    <li>...</li>
  </ul>
</li>

Answer 1

您可以在切换当前按钮之前从每个按钮中删除现有的 rotate 类:

$('li.nav-about').click(function () {
        $('.rotate:not("#arrow-about")').removeClass("rotate");
        $('#arrow-about').toggleClass("rotate");
        $(this).find('ul').toggle();
 });

(' li.nav-industry').click(function () {
        $('.rotate:not("#arrow-indusrty")').removeClass("rotate");
        $('#arrow-indusrty').toggleClass("rotate");
        $(this).find('ul').toggle();
    });

$('li.nav-application').click(function () {
        $('.rotate:not("#arrow-application")').removeClass("rotate");
        $('#arrow-application').toggleClass("rotate");
        $(this).find('ul').toggle();
    });