如何保持每個手風琴的第一個鏈接打開，同時在相同的頁面中有兩個相同的手風琴副本

Question

我是jquery的初學者。下面是我想出了一個教程的幫助下基本手風琴代碼：

$(document).ready(function() { 
      $('.reAccord > .accTitle').each(function(index){ 
       $('.accContainer').hide(); 
       $('.accTitle:first').next().slideDown(); 
       $(this).click(function() { 
        if ($(this).next().is(':hidden')) { 
         $('.accTitle').next().slideUp(); 
         $(this).next().slideDown(); 
        } 
        return false; 

        }); 
      }); 

     }); 

但問題是，如果我複製HTML有在同一頁面僅在手風琴的第一個元素兩個不同的手風琴1處於活動狀態，而第一個手風琴鏈接處於摺疊狀態。我應該做些什麼改變，以保持手風琴的每一份獨立副本的第一個鏈接是開放的。我也必須使用.each（function（index）{}）;在此：

<!-- accordion 1 --> 
     <div class="reAccord"> 
      <h2 class="accTitle"><a href="#">Accordion one</a></h2> 
      <div class="accContainer"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas.</p> 
      </div> 
      <h2 class="accTitle"><a href="#">Accordion Two</a></h2> 
      <div class="accContainer"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas.</p> 
      </div> 
      <h2 class="accTitle"><a href="#">Accordion Three</a></h2> 
      <div class="accContainer"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas.</p> 
      </div> 
      <h2 class="accTitle"><a href="#">Accordion Four</a></h2> 
      <div class="accContainer"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas.</p> 
      </div> 
     </div> <!--reaccord--> 
     <!-- accordion 2 --> 
     <div class="reAccord"> 
      <h2 class="accTitle"><a href="#">Accordion one</a></h2> 
      <div class="accContainer"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas.</p> 
      </div> 
      <h2 class="accTitle"><a href="#">Accordion Two</a></h2> 
      <div class="accContainer"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas.</p> 
      </div> 
      <h2 class="accTitle"><a href="#">Accordion Three</a></h2> 
      <div class="accContainer"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas.</p> 
      </div> 
      <h2 class="accTitle"><a href="#">Accordion Four</a></h2> 
      <div class="accContainer"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas.</p> 
      </div> 
     </div> <!--reaccord--> 

Answer 1

使用此：

$('.reAccord').each(function(index){ 
    $el = $(this); 
     $(this).find('.accTitle').each(function(index){ 
      $(this).next('.accContainer').hide(); 
      $el.find('.accTitle:first').next().slideDown(); 
      $(this).click(function() { 
       if ($(this).next().is(':hidden')) { 
        $(this).parent().find('.accContainer').slideUp(); 
        $(this).next('.accContainer').slideDown(); 
       } 
       return false; 

       }); 
     }); 

    }); 

https://jsfiddle.net/6Lnnw6jd/1/