我想要切换隐藏的元素（在加载时），然后将它们切换为显示。
我有一个显示效果的fiddle，但是当所有元素都可见时切换，以便除了两个之外的所有元素都被隐藏。如果可能，所有depth-1（顶级）注释都应在页面加载上显示两个回复。最后一条评论 - 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>
使用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();
});
答案 0 :(得分：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();
}
});