css 如何使导航项目再次处于非活动状态？

gr8qqesn 于 2022-11-27 发布在其他

关注(0)|答案(2)|浏览(285)

我的导览列有问题。我尝试建立一个功能，当我按一下一个导览项目时，它会展开其子系。这个功能很好用。当我按一下另一个导览项目时，它会折迭前一个项目并展开目前的项目。这个功能也很好用。我最近新增了一个新功能，我希望目前的导览项目保持其悬停的外观。让它看起来很活跃，如果你们明白我的意思.
我所能想到的就是这段代码，它确实做了我想要做的一些事情，但是它不会在单击当前导航项后再次使导航项无效，只有当我单击一个新的导航项时才会使导航项无效。如果有任何不清楚的地方，我会提供一个链接。

$(function(){
    $(".main-nav").on("click",function(){
        $(this).siblings().find(".inner-nav").hide(); //collapse siblings
        $(this).siblings().find('a').attr('id', ''); //make siblings inactive

        $(this).find(".inner-nav").toggle(); //expand current item
        $(this).find("a").attr('id','nav-active'); //make current item active
        $(this).find("ul").find("a").attr('id',''); //remove the nav-active ID from the current items children, as it also will appear as active, which is not the desired functionality
    });
});

css

来源：https://stackoverflow.com/questions/34451610/how-do-i-make-my-navigation-item-inactive-again

2条答案

按热度按时间

wa7juj8i1#

试试这个：

$(function(){
    $(".main-nav").on("click",function(){
        $(this).siblings().find(".inner-nav").hide();
        $(this).siblings().find('a').attr('id', '');

        $(this).find(".inner-nav").toggle();
        //$(this).find("a").attr('id','nav-active');
    if ($(this).find("a").attr('id') == 'nav-active') {
        $(this).find("a").attr('id','');
    } else {
        $(this).find("a").attr('id','nav-active');
    }
        $(this).find("ul").find("a").attr('id','');
    });
});

我补充了刚才的简单验证：

if ($(this).find("a").attr('id') == 'nav-active') {
    $(this).find("a").attr('id','');
} else {
    $(this).find("a").attr('id','nav-active');
}

fiddle
霍普，我没理解错.

赞(0）回复(0）举报 2022-11-27

k2fxgqgv2#

我真的不能很好地理解你的观点，但让我猜猜..当你点击任何一个孩子，它崩溃整个div ..在这种情况下，你需要e.stopPropagation();

$(function(){
    $(".main-nav").on("click",function(){
        $(".inner-nav").not($(this).find(".inner-nav")).hide();
        $(this).find(".inner-nav").toggle();
    });
    $(".main-nav > ul > li > a").on('click' , function(e){
        e.stopPropagation();
      $(".main-nav > ul > li > a").not($(this)).attr('id' , '');
      $(this).attr('id' , 'nav-active');
    });
});

我希望这是你要找的
Working Demo

赞(0）回复(0）举报 2022-11-27

我来回答

css 如何使导航项目再次处于非活动状态？

2条答案

相关问题

热门标签

最新问答