Question

好吧，我已经完成了一些基础知识，但我无法完成这项工作。问题是我不想为任何ul或li指定id或类，如果我点击ul中包含的标题我想要切换li（显示/隐藏）。如何在标题下选择li而不指定id和class ???。这是我尝试过的：

<nav>
    <ul>
        <header>Menu 1</header>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <ul>
        <header>Menu 2</header>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <ul>
        <header>Menu 3</header>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</nav>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    $(function(){
        $('ul li').hide();
        $('ul header').css('cursor', 'pointer');
        $('ul header').click(function(e) {
            $(this).next().toggle();
        });
    });
</script>

确定。这个只是切换ul的最后一个孩子，但没有全部。任何帮助将不胜感激，Thanx。

Answer 1

如果您使用$.fn.toggle，则在您点击时它会在两个功能之间切换。然后，您希望使用$.fn.siblings函数来定位具有相同父级的所有li元素。 Here is a demo on jsfiddle.

$(function(){
    $('ul li').hide();
    $('ul header').css('cursor', 'pointer');
    $('ul header').toggle(function(){
        $(this).siblings('li').show();
    },
    function(){
        $(this).siblings('li').hide();
    });
});

编辑：我的建议在分开时会让人感到困惑和冲突，所以我会将它们分组并解释

1。）正如Felix在上面评论的那样，除li作为ul的直接后代之外，其他任何内容都无效。因此，您需要将标记更改为以下内容：

<ul>
    <li class="header">Menu 1</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

2。）我会在你的CSS中设置以下规则，这样你就不必使用jQuery了：

nav ul li { display: none; }
nav ul .header { display: block; cursor: pointer; }

所以，有了这两个建议，你的jQuery现在看起来像这样：

$(function(){
    $('ul .header').toggle(function(){
        $(this).siblings('li').show();
    },
    function(){
        $(this).siblings('li').hide();
    });
});

Putting all of my recommendations together in a new fiddle.

Answer 2

next()获得匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

siblings()获取匹配元素集中每个元素的所有兄弟，可选择由选择器过滤。

$(function() {
    $('ul li').hide();
    $('ul header').css('cursor', 'pointer');
    $('ul header').click(function(e) {
        $(this).siblings('li').toggle();
    });
});

FIDDLE

jQuery：选择自定义ul儿童

2 个答案: