1

「フィルタリング可能な」アイテムのリストを作成しようとしています。ユーザーはリスト要素（親）をクリックできる必要があります。これにより、他のすべての親要素が非表示になり、「子」が表示されます。

htmlの例は次のとおりです。

<ul class='parent_list'>
    <li>Parent 1</li>
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2</li>
        <ul class='child_list hidden'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>

私のjQueryコードは次のとおりです。

$('.parent_list li').click(function(){
    $(this).siblings().addClass('hidden');
    $(this).children().removeClass('hidden');
});

もちろん、javascriptで、私はこのようなことについてあまり経験がないことがわかるでしょう。私はグーグルでたくさんの異なる例を検索しようとしましたが、まだ何も機能させることができませんでした。任意のヒント？

ありがとう！

4

3 に答える 3

4

http://jsfiddle.net/czHQE/2/

.child-listこのように、クラスは必要ありません。

HTML：

<ul class='parent_list'>
    <li>Parent 1
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>​

Javascript：

$('.parent_list li').click(function(){
    $(this).siblings().children().hide();
    $(this).children().show();
});​
于 2012-12-09T00:04:29.053 に答える
1

これを試して：

$('.parent_list > li').click(function(){
    $('ul.child_list').hide();
    $('ul.child_list', this).show();
});

そして、HTMLを変更して、</li>「Parent1」と「Parent2」の後の余分な部分を削除します。

<ul class='parent_list'>
    <li>
        Parent 1
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>
        Parent 2
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>​

の直接の子.parent_listがクリックされると、それ自体を除くすべての子リストが非表示になります。要素のプロパティを切り替えるだけなので、メソッド.hide()とメソッドを使用しました。.show()display

これが、いじくり回すjsfiddleです。

于 2012-12-09T00:01:09.650 に答える
1

マークアップもクリーンアップする必要があります。<li>「親1」と「親2」のタグを閉じてから、ネストされた後にもう一度閉じようとしました<ul>。

<ul class='parent_list'>
    <li>Parent 1
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul class='child_list hidden'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>
于 2012-12-09T00:04:11.100 に答える