1

ネストされた順序付けられていないリストでアコーディオン効果を作成しようとしています。

<script>
$(document).ready(function(){
    $('a').click(function(){
        $('.open').toggle();
        active = $(this).next().toggle();
        active.addClass('open');
    });
});
</script>

上記のコードでは、「open」のクラスですべてを閉じることがわかり、その理由もわかりますが、変数「active」で示される要素をスキップするコードを追加したいと考えています。

それが役立つ場合、これが私の完全なコードです：

<style>

ul {
    display:none;
}


</style>


<script>
$(document).ready(function(){
    $('a').click(function(){
        $('.open').toggle();
        active = $(this).next().toggle();
        active.addClass('open');
    });
});
</script>


<a href="#" id="toggle">toggle menu</a>
<ul id="menu">
<li>
    <a href="#">cool 1</a>
    <ul>
        <li><a href="#">cool 1</a>
            <ul>
                <li>hey 1</li>
                <li>hey 2</li>
            </ul>
        </li>
        <li><a href="#">cool 2</a>
            <ul>
                <li>hey 1</li>
                <li>hey 2</li>
            </ul>
        </li>
        <li><a href="#">cool 3</a></li>
    </ul>
</li>
<li><a href="#">cool 2</a></li>
<li>
    <a href="#">cool 3</a>
    <ul>
        <li><a href="#">cool 1</a>
            <ul>
                <li>hey 1</li>
                <li>hey 2</li>
            </ul>
        </li>
        <li><a href="#">cool 2</a></li>
        <li><a href="#">cool 3</a></li>
    </ul>
</li>
</ul>
4

4 に答える 4

2

siblings()を使用して、セレクタ内の要素をスキップできます。

于 2013-05-09T02:23:11.063 に答える
1

.toggleClass()を使用できます。

デモ

$(document).ready(function(){
    $('a').click(function(){
        var $this = $(this);
        var $ul = $this.next().toggle().toggleClass('open');
        $('.open').not($this.parents().add($ul)).hide()
    });
});
于 2013-05-09T02:33:16.553 に答える
1

試す

$(document).ready(function(){
    $('a').click(function(){
        var $this = $(this);
        var $ul = $this.next().toggle().addClass('open');
        $('.open').not($this.parents().add($ul)).hide().removeClass('open')
    });
});

デモ:フィドル

于 2013-05-09T02:27:46.780 に答える
0

コードを簡潔に保つため。サブアイテムにその状態を記憶させたいと仮定します。

次に、デリゲート ハンドラーを使用する必要があるというおまけのヒントを紹介します。メニューを動的に追加する場合、これはコードのメンテナンスに役立ちます。私はbodyここにそれを置きますが、おそらく何らかのラッピングdivまたは同等のものを定義/使用したいでしょう

フィドル

$('body').on('click','a', function(){
    $(this).siblings('ul').toggleClass('open');
});
于 2013-05-09T02:47:58.373 に答える