個別響應式jQuery手風琴

Question

當我嘗試複製多個下拉菜單中的手風琴時，它會打開全部並全部關閉，而不是單獨關閉。我嘗試將第二個重命名爲accordion2，它會打開，但不會關閉。第三個根本不起作用。我是新人，只是不知道該怎麼做才能使其工作，所以我可以有三個獨立工作的手風琴。請幫忙！謝謝。

<!--ACCORDION--> 
     <h1 id="homeTitles">Cory Delancey</h1> 
     <div class="accordion"> 
    <div class="accordion-section"> 
     <a class="accordion-section-title" href="#accordion-1">Cory Delancey</a> 

     <div id="accordion-1" class="accordion-section-content"> 
      <img class="guidesImg" src="images/campingRV.jpg"> 
      <p><strong>Certification: </strong>4L</p> 
      <p><strong>Years of Experience: </strong>9</p> 
      <p><strong>Email: </strong>cory@sra.com</p> 
      <p><strong>Biography: </strong>Cory grew up in New York City, but each summer his family left the city to spend time backpacking and whitewater rafting. He came to Idaho for college and never left the state. He spends his summers as a guide on the rivers he loves.</p> 
     </div><!--end .accordion-section-content--> 
    </div><!--end .accordion-section--> 
</div><!--end .accordion--> 

</main> 


/* GUIDES ACCORDION 1 */ 
.accordion, .accordion * { 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; } 

.accordion { 
    overflow:hidden; 
    box-shadow:0px 1px 3px rgba(0,0,0,0.25); 
    border-radius:3px; 
    background:#f7f7f7; } 

/* ACCORDION titles */ 
.accordion-section-title { 
    width:100%; 
    padding:15px; 
    display:inline-block; 
    border-bottom:1px solid #1a1a1a; 
    background:#619efc; 
    transition:all linear 0.15s; 
    /* Type */ 
    font-size:1.200em; 
    text-shadow:0px 1px 0px #1a1a1a; 
    color:#fff; } 

.accordion-section-title.active, .accordion-section-title:hover { 
    background:#4c4c4c; text-decoration:none; } 

.accordion-section:last-child .accordion-section-title { 
    border-bottom:none; } 

/* ACCORDION Content */ 
.accordion-section-content { padding:15px; display:none; } 

/* ACCORDION Images */ 
.guidesImg{ float: left; margin: 10px 10px 10px 10px; } 


/*GUIDES PAGES*/ 

$(document).ready(function() { 
    function close_accordion_section() { 
     $('.accordion .accordion-section-title').removeClass('active'); 
     $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
    } 

    $('.accordion-section-title').click(function(e) { 
     // Grab current anchor value 
     var currentAttrValue = $(this).attr('href'); 

     if($(e.target).is('.active')) { 
      close_accordion_section(); 
     }else { 
      close_accordion_section(); 

      // Add active class to section title 
      $(this).addClass('active'); 
      // Open up the hidden content panel 
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
     } 

     e.preventDefault(); 
    }); 
}); 

Answer 1

更新close_accordion_section()有它接受一個變量來關閉特定面板，然後通過（不點擊的或全部）被點擊的特定標題部分作爲變量，當你調用該函數，並參考相對於您點擊關閉面板的標題而定位的元素。

$(document).ready(function() { 
 
    function close_accordion_section($el) { 
 
    $el.removeClass("active"); 
 
    $el.next(".accordion-section-content").slideUp(300).removeClass("open"); 
 
    } 
 
    
 
    var $titles = $(".accordion-section-title"); 
 

 
    $titles.on('click',function(e) { 
 
    // Grab current anchor value 
 
    var currentAttrValue = $(this).attr("href"); 
 

 
    if ($(e.target).is(".active")) { 
 
     close_accordion_section($(this)); 
 
    } else { 
 
     close_accordion_section($titles.not($(this))); 
 
     // Add active class to section title 
 
     $(this).addClass("active"); 
 
     // Open up the hidden content panel 
 
     $(".accordion " + currentAttrValue).slideDown(300).addClass("open"); 
 
    } 
 

 
    e.preventDefault(); 
 
    }); 
 
});

/* GUIDES ACCORDION 1 */ 
 
.accordion, .accordion * { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.accordion { 
 
    overflow: hidden; 
 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); 
 
    border-radius: 3px; 
 
    background: #f7f7f7; 
 
} 
 

 
/* ACCORDION titles */ 
 
.accordion-section-title { 
 
    width: 100%; 
 
    padding: 15px; 
 
    display: inline-block; 
 
    border-bottom: 1px solid #1a1a1a; 
 
    background: #619efc; 
 
    transition: all linear 0.15s; 
 
    /* Type */ 
 
    font-size: 1.200em; 
 
    text-shadow: 0px 1px 0px #1a1a1a; 
 
    color: #fff; 
 
} 
 

 
.accordion-section-title.active, .accordion-section-title:hover { 
 
    background: #4c4c4c; 
 
    text-decoration: none; 
 
} 
 

 
.accordion-section:last-child .accordion-section-title { 
 
    border-bottom: none; 
 
} 
 

 
/* ACCORDION Content */ 
 
.accordion-section-content { 
 
    padding: 15px; 
 
    display: none; 
 
} 
 

 
/* ACCORDION Images */ 
 
.guidesImg { 
 
    float: left; 
 
    margin: 10px 10px 10px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!--ACCORDION--> 
 
<h1 id="homeTitles">Cory Delancey</h1> 
 
<div class="accordion"> 
 

 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-1">Cory Delancey</a> 
 

 
    <div id="accordion-1" class="accordion-section-content"> 
 
     <img class="guidesImg" src="images/campingRV.jpg"> 
 
     <p><strong>Certification: </strong>4L</p> 
 
     <p><strong>Years of Experience: </strong>9</p> 
 
     <p><strong>Email: </strong>cory@sra.com</p> 
 
     <p><strong>Biography: </strong>Cory grew up in New York City, but each summer his family left the city to spend time backpacking and whitewater rafting. He came to Idaho for college and never left the state. He spends his summers as a guide on the 
 
     rivers he loves.</p> 
 
    </div> 
 
    <!--end .accordion-section-content--> 
 
    </div> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-2">Cory Delancey</a> 
 

 
    <div id="accordion-2" class="accordion-section-content"> 
 
     <img class="guidesImg" src="images/campingRV.jpg"> 
 
     <p><strong>Certification: </strong>4L</p> 
 
     <p><strong>Years of Experience: </strong>9</p> 
 
     <p><strong>Email: </strong>cory@sra.com</p> 
 
     <p><strong>Biography: </strong>Cory grew up in New York City, but each summer his family left the city to spend time backpacking and whitewater rafting. He came to Idaho for college and never left the state. He spends his summers as a guide on the 
 
     rivers he loves.</p> 
 
    </div> 
 
    <!--end .accordion-section-content--> 
 
    </div> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-3">Cory Delancey</a> 
 

 
    <div id="accordion-3" class="accordion-section-content"> 
 
     <img class="guidesImg" src="images/campingRV.jpg"> 
 
     <p><strong>Certification: </strong>4L</p> 
 
     <p><strong>Years of Experience: </strong>9</p> 
 
     <p><strong>Email: </strong>cory@sra.com</p> 
 
     <p><strong>Biography: </strong>Cory grew up in New York City, but each summer his family left the city to spend time backpacking and whitewater rafting. He came to Idaho for college and never left the state. He spends his summers as a guide on the 
 
     rivers he loves.</p> 
 
    </div> 
 
    <!--end .accordion-section-content--> 
 
    </div> 
 
    <!--end .accordion-section--> 
 
</div> 
 
<!--end .accordion--> 
 

 
</main>