选择其他项目时删除切换 class

Question

在我的移动网站上，我有一个垂直下拉菜单（像手风琴一样），其中每个父项目都有一个向下箭头来指示下拉菜单。当用户单击父项目时，箭头会旋转，当您再次单击它以关闭下拉菜单时，它会旋转回原始状态。但是，如果您不单击下拉菜单将其关闭，而只是单击另一个父项，则下拉菜单将关闭，但箭头会停留在旋转位置。这是代码：

$('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();
    });

关于如何在单击另一个项目时删除 'rotate' class 的任何建议？

编辑这是标记的样子：

<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 class，例如：

$('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();
    });

Answer 2

如果您不想更改太多代码，请试试这个。

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

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

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

现在您可以确定每个元素（而不是所选元素）将恢复到其原始状态。

Answer 3

你可以做到这一点。

var toggleNavigation = function(){
    var r_navigation = $('li.nav-about,li.nav-industry,li.nav-application');

    $(r_navigation).each(function(i, oNav){
        $(oNav).on('click',function(){
            if(!$(oNav).hasClass('rotate')){
                $(r_navigation).removeClass('rotate');
                $(oNav).addClass('rotate');
            }else{
               $(oNav).removeClass('rotate');
            }
        });
    });
};

选择其他项目时删除切换 class

Remove toggle class when other item is selected

javascript

jquery

toggle