当选择其他项目时，删除切换类

Remove toggle class when other item is selected

本文关键字：删除 选择 其他 项目      更新时间：2023-09-26

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

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

您可以在切换当前按钮之前从每个按钮中删除现有的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();
    });

如果你不想改变太多的代码，就试试这个。

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

现在您可以确定每个元素，而不是被选中的元素，将会恢复到原来的状态

你可以这么做。

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');
            }
        });
    });
};
相关文章：