Javascript 切换要在jQuery中显示的某些元素_Javascript_Jquery_Show Hide_Slidetoggle

Javascript 切换要在jQuery中显示的某些元素

javascript jquery

Javascript 切换要在jQuery中显示的某些元素,javascript,jquery,show-hide,slidetoggle,Javascript,Jquery,Show Hide,Slidetoggle,我希望将元素切换为隐藏（加载时），然后切换为显示我有一个显示效果的方法，但反过来，当所有元素都可见，然后切换，以便隐藏除两个以外的所有元素。如果可能，所有depth-1（顶级）注释应在pageload上显示两条回复。最后一条注释-comment-687-应该与其父注释comment-682一起可见，但我还没有弄清楚如何在所有场景中都将两条注释作为默认注释这里是html <ol class="commentlist"> <li class="comment byus

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

我有一个显示效果的方法，但反过来，当所有元素都可见，然后切换，以便隐藏除两个以外的所有元素。如果可能，所有

depth-1

（顶级）注释应在pageload上显示两条回复。最后一条注释-

comment-687

-应该与其父注释

comment-682

一起可见，但我还没有弄清楚如何在所有场景中都将两条注释作为默认注释

这里是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>



评论-677


评论-678


评论-680


评论-686


评论-688


评论-689




评论-698




评论-679


评论-682


评论-690




评论-691


评论-692




评论-681


评论-682


评论-687

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();
});

$（'ol'）。查找（'>li>div>ul'）
。之前（“显示所有答复”）；
$（'.commentlist'）。查找（'div.toggle'）。单击（函数（）{
$（this）.next（'ul'）.find（'.depth-2:gt（1））.slideToggle（）；
$（this）.next（'ul'）.find（'.depth-3'）.slideToggle（）；
});

这需要一点切割和切割，但这应该适合你-

$（'ol'）。查找（'>li>div>ul'）
。之前（“显示所有答复”）；
/*添加此函数以在适当的情况下隐藏除2个之外的所有d3*/
$（'.depth-1'）。每个（函数（）{
变量d3Length=$（this）.find（'.depth-3'）.length；
如果（d3Length>1）{//只希望这会影响具有2个或更多d3的人
var$d3=$（this.find（'.depth-3'）；
$d3.hide（）.slice（0，2.show（）；//全部隐藏，然后显示前两个
}
});
$（'.commentlist'）。查找（'div.toggle'）。单击（函数（）{
$（this）.next（'ul'）.find（'.depth-2:gt（1））.slideToggle（）；
/*将代码重新分解，以考虑d3的数量*/
变量d3Length=$（this）.next（'ul'）.find（'.depth-3'）.length；
如果（d3Length>1）{//仅影响具有2个或更多d3的对象
$（this）.next（'ul'）.find（'.depth-3:gt（1））.slideToggle（）；//滑动切换所有剩余的d3
}否则{
$（this）.next（'ul'）.find（'.depth-3'）.slideToggle（）；
}
});

@Jay Blanchard谢谢。更正确的是class

depth-1

——它是顶级注释（祖父母）。我更新了我的问题，使之更清楚。@Jay Blanchard非常感谢！你的回答对我非常有帮助。我更新了你的小提琴，现在我几乎把它弄到手了。还有一个小问题是，在所有我未阐明[link]的情况下，将两个回复显示为默认值-请参见列表中的3和5

$('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();
    }
});