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>

Ok。これは、ulの最後の子を切り替えるだけですが、すべてではありません。助けていただければ幸いです、ありがとう。

4

2 に答える 2

1

$ .fn.toggleを使用すると、クリックすると2つの機能が交互に切り替わります。次に、$。fn.siblingsli関数を使用して、同じ親を持つすべての要素をターゲットにします。これが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の直接の子孫として以外のものを持つことは無効なHTMLです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; }

したがって、これら2つの推奨事項を設定すると、jQueryは次のようになります。

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

私のすべての推奨事項を新しいフィドルにまとめます。

于 2012-08-19T17:18:03.210 に答える
0

next（）は、一致した要素のセット内の各要素の直後の兄弟を取得します。セレクターが提供されている場合、そのセレクターと一致する場合にのみ、次の兄弟を取得します。

siblings（）は、一致した要素のセット内の各要素のすべての兄弟を取得します。オプションで、セレクターによってフィルター処理されます。

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

フィドル

于 2012-08-19T17:47:34.237 に答える