Question

我正在寻找jquery的帮助，以显示或隐藏一些结果（评论的回复）到实际内容而不影响其他元素。问题是当我点击显示更多时，每个div中的所有元素同时出现。我该如何解决这个问题？谢谢 Gham

// html5
<div class="user_comments">
<p> This is the main comment ..... </p>

<article class="user_replies"> <p class="reply">  test2  </p> </article> 
<article class="user_replies"> <p class="reply">  test   </p> </article>
<article class="user_replies"> <p class="reply">  ok2    </p> </article> 
<article class="user_replies"> <p class="reply">  ok1   </p> </article> 
<article class="user_replies"> <p class="reply">  My first comment </p> </article>

    <p class="viewMore"> <a href="#"> view more </a>  </p> 
     <p class="viewLess"> <a href="#"> view less </a>  </p> 

 </div>



<div class="user_comments">
<p> This is the main comment ..... </p>  

<article class="user_replies"> <p class="reply"> Thank you 1 </p> </article>  
<article class="user_replies"> <p class="reply"> Thanks  </p> </article> 
<article class="user_replies"> <p class="reply"> test  6 </p> </article>
<article class="user_replies"> <p class="reply">  another test </p> </article>
<article class="user_replies"> <p class="reply"> test comment reply.</p> </article> 
<article class="user_replies"> <p class="reply"> My  reply to view more.</p> </article>
<article class="user_replies"> <p class="reply"> 4 reply </p> </article>
<article class="user_replies"> <p class="reply"> Third reply </p> </article> 
<article class="user_replies"> <p class="reply"> my second ... </p> </article>
    <p class="viewMore"> <a href="#"> view more </a> </p> 
     <p class="viewLess"> <a href="#"> view less </a>  </p> 

 </div>

// This is jquery code: 
// Show more replies: 
$('.user_comments').find('.user_replies:gt(3)').hide();

$('.viewMore, .viewLess').click(function(e){
          e.preventDefault();
  $('.user_comments').find('.user_replies:gt(3)').slideToggle(500);

         if($(this).hasClass('viewLess') === true) {
                $('.viewMore').show(); 
                $('.viewLess').hide(); 

          } else {
                $('.viewLess').show(); 
                 $('.viewMore').hide();

                      }


 });// End of show more replies.

// CSS
.viewLess { display: none;}

Answer 1

试试这个：

$('.viewMore, .viewLess').click(function (e) {
    e.preventDefault();
    $(this).closest('.user_comments').find('.user_replies:gt(3)').slideToggle(500);
    if ($(this).hasClass('viewLess') === true) {
        $(this).prev().show();
        $(this).hide();

    } else {
        $(this).next().show();
        $(this).hide();
    }
});

FIDDLE DEMO

Answer 2

那是因为当您点击时，您应首先使用类user_comments搜索您的父div。在这里你隐藏/显示全局

http://jsfiddle.net/Lx9UA/17/

var $parent=$(this).parent('.user_comments');
var more = $parent.hasClass('more');
var $sib=$parent.siblings('.user_comments.more');
console.log('click on '+more+': '+$parent);
if(more) {
    $parent.removeClass('more').find('.user_replies:gt(3)').hide();
}
else {
    $.each($sib.removeClass('more'),function(){
        $(this).find('.user_replies:gt(3)').hide();
    });
    $parent.addClass('more').find('.user_replies:gt(3)').show();
}

在可能的情况下也更喜欢使用CSS。

jquery显示并隐藏多个列表中的一些项目

2 个答案: