1

我正在寻求 jquery 的帮助，以在不影响其他元素的情况下显示或隐藏对实际内容的一些结果（评论的回复）。问题是，当我单击显示更多时，每个 div 中的所有元素都会同时显示。我该如何解决这个问题？谢谢加姆

// 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;}
4

2 回答 2

0

尝试这个：

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

小提琴演示

于 2013-05-24T09:44:23.600 回答
0

那是因为当您单击时，您应该首先使用类 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。

于 2013-05-24T09:47:41.360 回答