0

動的なマルチレベル jquery アコーディオン メニューを作成しますが、通常の li タグの代わりに div を使用します。

各 div にはデータ属性 (データレベル) があり、値は 1、2、3、4 などです...

私の「トグル」関数は、それ自身のデータレベルと一致するデータレベルを持つ div に到達するまで、それ自身よりも大きなデータレベルを持つ各 div を表示/非表示にする必要があります...

私が持っている場合：

<div data-level="1">Sample Title</div>
    <div data-level="2">Sample Subtitle</div>
        <div data-level="3">Sample Subsubtitle</div>
    <div data-level="2">Sample Subtitle</div>

<div data-level="1">Sample Title</div>
    <div data-level="2">Sample Subtitle</div>
        <div data-level="3">Sample Subsubtitle</div>

次に、最初の「サンプル タイトル」をクリックすると、「サンプル サブタイトル」と「サブサブタイトル」の両方が切り替わりますが、2 番目の「サンプル タイトル」またはその子には触れません。もちろん、「サブタイトル」をクリックすると、 「サブサブタイトル」ですが、他の要素には影響しません。

何かアドバイス？

4

1 に答える 1

1

このフィドルをチェックしてください：http://jsfiddle.net/p4gps/1/

キーは次のコードにあります。

$('div').click(function() {
    var level = parseInt($(this).data('level'));
    if ($(this).hasClass('show')) {
        $(this).removeClass('show');
        $(this).nextAll('div').each(function() {
            if (parseInt($(this).data('level')) > level) $(this).hide().removeClass('show');
            else return false;
        });
    } else {
        $(this).addClass('show');
        $(this).nextAll('div').each(function() {
            if (parseInt($(this).data('level')) > level) $(this).show().addClass('show');
            else return false;
        });
    }
});

クリックした要素の後に続くすべての div 要素に対して $.each を実行します。同じレベル以下の div に達すると、ループから抜け出します。

于 2013-06-12T01:54:09.353 に答える