个别响应式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>