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 に答える