选择其他项目时删除切换类答案

【问题标题】：Remove toggle class when other item is selected选择其他项目时删除切换类
【发布时间】：2015-09-24 15:32:03
【问题描述】：

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

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

【问题讨论】：

如果您分享标记，我们可以建议更好的解决方案。

标签： javascript jquery toggle

【解决方案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();
    });

【讨论】：

我已经尝试过了，它可以工作，但是当您单击父项时它不会旋转回来。因此，例如，如果我打开了“关于”并再次单击它以将其关闭，则箭头不会向后旋转。如果我点击“行业”，但它确实
@MariaL 实施以避免自身

【解决方案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();
});

现在您可以确定每个元素（而不是选定的元素）都会恢复到它们的原始状态。

【讨论】：

【解决方案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');
            }
        });
    });
};

【讨论】：