显示一个隐藏和显示部分一次使用jquery

Question

我试图显示和隐藏网页的某些部分，而不显示或隐藏其他具有类似名称的元素，例如我想能够显示某些评论回复而不会显示具有相同类名的其他评论回复。但我似乎不能让我的jquery工作正确。换句话说，我想单击类view-comments中的一个元素，并显示类名最接近的部分more-comments

这是我简化的HTML代码。

HTML

 <article> 
      <div> 
       <div> 
        .... 
        <a class="view-comments" title="" href="">View Comments</a> 
       </div> 
      </div> 

      <section class="more-comments"> 
       ....... 
      </section> 
     </article> 

     <article> 
      <div> 
       <div> 
        .... 
        <a class="view-comments" title="" href="">View Comments</a> 
       </div> 
      </div> 

      <section class="more-comments"> 
       ....... 
      </section> 
     </article> 


     <article> 
      <div> 
       <div> 
        .... 
        <a class="view-comments" title="" href="">View Comments</a> 
       </div> 
      </div> 

      <section class="more-comments"> 
       ....... 
      </section> 
     </article> 

     <article> 
      <div> 
       <div> 
        .... 
        <a class="view-comments" title="" href="">View Comments</a> 
       </div> 
      </div> 

      <section class="more-comments"> 
       ....... 
      </section> 
     </article> 

jQuery的

$(document).ready(function() { 
     $('.view-comments').click(function() { 
     $('.more-comments').toggle($(this).hasClass('view-comments')); 
     $(this).toggleClass('view-comments hide-comments'); 
     }); 
    }); 

Answer 1

要做到这一点，我会做一切不具有默认隐藏的类active元素。然后，当你点击一个链接（称为防止默认阻止页面导航），从所有more-comments部分删除类active，然后添加类active到最近more-comments部分

$(document).ready(function() { 
 
     $('.view-comments').click(function(e) { 
 
     e.preventDefault(); 
 
     $('.more-comments').removeClass('active'); 
 
     $(this).closest('article').find('.more-comments').addClass('active'); 
 
     }); 
 
    });

.more-comments:not(.active){ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article> 
 
      <div> 
 
       <div> 
 
        .... 
 
        <a class="view-comments " title="" href="">View Comments</a> 
 
       </div> 
 
      </div> 
 

 
      <section class="more-comments active"> 
 
       .......more-comments 1 
 
      </section> 
 
     </article> 
 

 
     <article> 
 
      <div> 
 
       <div> 
 
        .... 
 
        <a class="view-comments" title="" href="">View Comments</a> 
 
       </div> 
 
      </div> 
 

 
      <section class="more-comments"> 
 
       ....... more-comments 2 
 
      </section> 
 
     </article> 
 

 

 
     <article> 
 
      <div> 
 
       <div> 
 
        .... 
 
        <a class="view-comments" title="" href="">View Comments</a> 
 
       </div> 
 
      </div> 
 

 
      <section class="more-comments"> 
 
       ....... more-comments 3 
 
      </section> 
 
     </article> 
 

 
     <article> 
 
      <div> 
 
       <div> 
 
        .... 
 
        <a class="view-comments" title="" href="">View Comments</a> 
 
       </div> 
 
      </div> 
 

 
      <section class="more-comments"> 
 
       ....... more-comments 4 
 
      </section> 
 
     </article>

Answer 2

$('.view-comments').click(function (e) { 
    e.preventDefault(); 
    $(this).closest('article').find('.more-comments').toggle(); 
}); 

demo

尝试这种方式