Question

我的导航栏出现问题。我正在尝试创建一个功能，当我点击一个导航项时，它会扩展其子项。这非常有效。当我单击另一个导航项时，它会折叠上一个项目并展开当前项目。这也很完美。我最近添加了一个新功能，我希望当前导航项保持其悬停的外观，使其显得活跃，如果你们明白我的意思。

我能想到的就是这段代码，它确实可以完成我想要的一些代码，但是只有当我点击一个新的导航项时，它才会使导航项再次无效。如果其中任何一项不清楚，我将提供一个链接。

router.post('/updatesala', function(peticion, responsep){
    var password = peticion.body.password;
    var url = peticion.body.url;

    ListaSalas.updateOne({'url': url}, {'password': password}, function (err, result) {
        if (err) return err;
        var PassBusca = result.result.n;
        var pwd = PassBusca ? "passwordmal": "passwordok";
        responsep.writeHead(200, {"Content-Type": "text/html"});
        responsep.write(pwd);
        responsep.end();        
    });
});

Answer 1

我真的不能很好地理解你的观点，但让我猜一下......当你点击任何一个孩子时，它会崩溃整个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

Answer 2

试试这个：

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

希望，我理解你。

如何让我的导航项再次处于非活动状态？

2 个答案: