切换一些元素以在 jQuery 中显示

Question

我希望将元素切换为隐藏（加载时），然后将它们切换为显示。

我有一个 fiddle 显示效果，但是当所有元素都可见然后切换时，除了两个之外的所有元素都被隐藏了。如果可能，所有depth-1（顶级）cmets 都应在页面加载时显示两个回复。最后一条评论 - comment-687 - 应该与它的父 comment-682 一起可见，但我还没有弄清楚如何在所有场景中将两个 cmets 作为默认值。

这里是html

 <ol class="commentlist">
    <li class="comment byuser comment-author-admin even thread-even depth-1" id="li-comment-677">
        <div id="comment-677" class="grandparent">
            <div class="comment-inner">comment-677
            </div>
            <ul class="children">
                <li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-678">
                    <div id="comment-678" class="parent">
                        <div class="comment-inner">comment-678</div>
                        <ul class="children">
                            <li class="comment byuser comment-author-admin even depth-3" id="li-comment-680">
                                <div id="comment-680">
                                    <div class="comment-inner">comment-680</div>
                                </div>
                            </li>
                            <li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-686">
                                <div id="comment-686">
                                    <div class="comment-inner">comment-686</div>
                                </div>
                            </li>
                            <li class="comment byuser comment-author-admin even depth-3" id="li-comment-688">
                                <div id="comment-688">
                                    <div class="comment-inner">comment-688</div>
                                </div>
                            </li>
                            <li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-689">
                                <div id="comment-689">
                                    <div class="comment-inner">comment-689</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="comment byuser comment-author-admin even depth-2" id="li-comment-698">
                    <div id="comment-698" class="parent">
                        <div class="comment-inner">comment-698</div>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li class="comment byuser comment-author-admin odd alt thread-odd thread-alt depth-1" id="li-comment-679">
        <div id="comment-679" class="grandparent">
            <div class="comment-inner">comment-679</div>
            <ul class="children">
                <li class="comment byuser comment-author-admin even depth-2" id="li-comment-682">
                    <div id="comment-682" class="parent">
                        <div class="comment-inner">comment-682</div>
                        <ul class="children">
                            <li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-690">
                                <div id="comment-690">
                                    <div class="comment-inner">comment-690</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="comment byuser comment-author-admin even depth-2" id="li-comment-691">
                    <div id="comment-691" class="parent">
                        <div class="comment-inner">comment-691</div>
                    </div>
                </li>
                <li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-692">
                    <div id="comment-692" class="parent">
                        <div class="comment-inner">comment-692</div>
                    </div>
                </li>
            </ul>
        </div>
    </li>

    <li class="comment byuser comment-author-admin even thread-even depth-1" id="li-comment-681">
        <div id="comment-681" class="grandparent">
            <div class="comment-inner">comment-681</div>
            <ul class="children">
                <li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-683">
                    <div id="comment-683" class="parent">
                        <div class="comment-inner">comment-682</div>
                        <ul class="children">
                            <li class="comment byuser comment-author-admin even depth-3" id="li-comment-687">
                                <div id="comment-687">
                                    <div class="comment-inner">comment-687</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ol>

Javascript：

$('ol').find('> li > div > ul')
.before('<div class="toggle">Show all replies</div>');

$('.commentlist').find('div.toggle').click(function () {
    $(this).next('ul').find('.depth-2:gt(1)').slideToggle(); 
    $(this).next('ul').find('.depth-3').slideToggle();
});

Answer 1

这需要一些切片和切块，但这应该适合你 - http://jsfiddle.net/jayblanchard/Q7kPE/1/

$('ol').find('> li > div > ul')
    .before('<div class="toggle">Show all replies</div>');

/* added this function to hide all but 2 of the d3's where appropriate */
$('.depth-1').each(function() {
    var d3Length = $(this).find('.depth-3').length;
    if(d3Length > 1) { // only want this to affect those with 2 or more d3's
        var $d3 = $(this).find('.depth-3');
        $d3.hide().slice(0, 2).show(); // hide all and then show the first two
    }
});

$('.commentlist').find('div.toggle').click(function () {
    $(this).next('ul').find('.depth-2:gt(1)').slideToggle();
    /* re-factored the code here to take into account the number of d3's */
    var d3Length = $(this).next('ul').find('.depth-3').length; 
    if(d3Length > 1) { // affect only those with 2 or more d3's       
        $(this).next('ul').find('.depth-3:gt(1)').slideToggle(); // slide toggle all of the remaining d3's
    } else {
        $(this).next('ul').find('.depth-3').slideToggle();
    }
});