web-dev-qa-db-ja.com

ネストしたコメントを切り替える

スレッド化されたコメントを切り替える（隠す/表示する）ための解決策を見つけようとしています。コメント1、2、3などを表示し、1.1、1.2、1.3などを非表示にする必要があります。[コメントの表示]をクリックすると、コメントのスレッドが切り替わり、表示されます。

例：

1 ---

-----「コメントをもっと見る」をクリックしてください

----- 1.1

----- 1.2

----- 1.3

----- ...

2 ---

-----「コメントをもっと見る」をクリックしてください

----- 2.1

----- 2.2

----- 2.3

----- ...

commentsjquerythreading
2
Andycap

http://jsfiddle.net/K3gr7/4/

コメントをマークアップするために順序付きリストを使用しました。おそらくあなた自身の設定に合わせて微調整し、最適化のためにいくつかの変数をキャッシュする必要がありますが、機能はそこにあります。

$(document).ready(function() {

    // Toggle all
    $('#toggle-all').click(function() {
        var $subcomments = $('#comments').find('> li > ol');
        if ($subcomments.filter(':hidden').length) {
            $subcomments.slideDown();
        } else {
            $subcomments.slideUp();
        }
    });

    // Add buttons to threaded comments
    $('#comments').find('> li > ol')
        .before('<button class="toggle">Show more comments</button>');

   // Toggle one section
    $('#comments').find('button.toggle').click(function() {
        $(this).next('ol').slideToggle();
    }); 
});

私は最初あなたの質問を誤解しました、それが私が「すべてをトグルする」ボタンを追加して、そこに無料のボーナスとしてそれを残した理由です。

4
Geert