0

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

<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 的最后一个孩子，但不是全部。任何帮助将不胜感激，谢谢。

4

2 回答 2

1

如果您使用$.fn.toggle，当您单击时，它将在两个功能之间交替。然后，您想使用$.fn.siblings函数来定位li具有相同父级的所有元素。这是关于 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();
    });
});

把我所有的建议放在一个新的小提琴中。

于 2012-08-19T17:18:03.210 回答
0

next() gets the immediate following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

siblings() gets all the siblings of each element in the set of matched elements, optionally filtered by a selector.

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

FIDDLE

于 2012-08-19T17:47:34.237 回答