Question

我不是jquery的专家，但试图让菜单起作用。基本上，我有一个由最多3级嵌套列表组成的菜单。第一级有一个小箭头，其背景图像在打开第一级列表时打开或关闭。任何其他嵌套列表都不需要具有背景图像。当您单击它时，我的脚本会打开菜单，并且还应将第一级列表从“非活动”类切换到“活动”类。这是脚本：

$(document).ready(function(){

$("#left-navigation-holder ul.level1 li.inactive").toggle(function(){

$(this).addClass("active");

}, function () {

$(this).removeClass("active");

});


$("#left-navigation-holder li a").click(function(){

menu = $(this).parent('li').children('ul');

menu.toggle();

});

});

问题是当点击第二级和第三级列表时也会发生切换功能，导致箭头切换，即使没有点击第一级列表也是如此。我想使用$（“＃left-navigation-holder ul.level1 li.inactive”）。toggle会将函数限制为第一级列表，并且类为“inactive”。

任何帮助都会非常感激。

本

Answer 1

使用直接子选择器，如下所示：

$("#left-navigation-holder ul.level1 > li.inactive")
//or...
$("#left-navigation-holder > ul > li > a")

在您的选择器中，ul.level1 li.inactive表示<li class="inactive">下方的<ul class="level1"> ，将>设为ul.level1 > li.inactive说只匹配<li>下面的<ul> 直接，而不是下面任意数量的等级。

你可以整体做到这一点，删除.level1除非它用于其他目的：

$("#left-navigation-holder > ul > li.inactive")

Answer 2

您可以使用仅$("#left-navigation-holder ul > li.inactive")选择列表的直接子项（通过>选择器）。

Answer 3

好吧，我回来了。我今天早上正在测试我的代码，并意识到没有子级别的列表不再正常运行。如果我在这些上设置链接，则单击不会将我发送到请求的URL，而只会触发“活动”和“非活动”之间的类更改。代码看起来像这样：

（文档）$。就绪（函数（）{

$(".left-navigation-holder li a").click(function(){
    menu = $(this).parent('li').children('ul');
    menu.toggle();
});

$(".left-navigation-holder ul.level1 > li").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});

$(".left-navigation-holder ul > li > ul").click(function(toggle) {
    toggle.stopPropagation();
    return false;
});

}）;

如果我删除了切换功能，则链接可以正常工作。

我几乎可以肯定这是一个简单的修复，但我必须说，我的知识非常糟糕。谢谢，Ben

Jquery选择器问题

3 个答案: