顯示一個隱藏和顯示部分一次使用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

嘗試這種方式