如何通过单击打开和折叠手风琴Jquery

尝试单击打开并折叠手风琴。 我能够但是当我选择另一支手风琴时它会越来越近。

它应该选择或关闭同一个手风琴。

这是我试过的。

JS：

$(document).on("click", ".accordion-toggle", function () { if ($(this).attr('class').indexOf('open') == -1) $(this).toggleClass("open").next().slideToggle('fast'); //Hide the other panels $(".accordion-toggle").not($(this)).removeClass("open"); $(".accordion-content").not($(this).next()).slideUp('fast'); }); 

小提琴： 演示

Answer 1

我创造了一个新的小提琴与一些CSS …

HTML

 
 Heading 1 
 Content 1 
 
 
 Heading 2 
 Content 2 
 
 
 Heading 3 
 Content 3 
  

JS

 $(document).ready(function () { $('.accordion-toggle').on('click', function(event){ event.preventDefault(); // create accordion variables var accordion = $(this); var accordionContent = accordion.next('.accordion-content'); // toggle accordion link open class accordion.toggleClass("open"); // toggle accordion content accordionContent.slideToggle(250); }); }); 

请检查这个小提琴

Answer 2

单击HTML即可轻松简单地引导accordion

  Open panel 3 Close panel 3 
 
 
 
 
 Panel 1 
 
 
 
 Contents panel 1 
 
 
 
 
 
 Panel 2 
 
 
 
 Contents panel 2 
 
 
 
 
 
 Panel 3 
 
 
 
 Contents panel 3 
 
 
  

简单的js代码

 $(".openpanel").on("click", function() { $("#panel3").collapse('show'); }); $(".closepanel").on("click", function() { $("#panel3").collapse('hide'); }); $('#accordion').on('show.bs.collapse', function () { $('#accordion .in').collapse('hide'); }); 

我希望它会对你有所帮助。