jQuery ui手风琴在单击时扩展但在第二单击中不崩溃

Question

我有一次手风琴点击它的扩展（打开），但我再次点击它没有关闭手风琴。 如何更改功能，以便在我第二次单击手风琴时可以关闭手风琴。

 $(function() { var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; $("#accordion").accordion({ icons: icons }); $("#toggle").button().on("click", function() { if ($("#accordion").accordion("option", "icons")) { $("#accordion").accordion("option", "icons", null); } else { $("#accordion").accordion("option", "icons", icons); } }); }); 

 <section class="content"> <h1 style="color:#B94A7E"> header 1</h1> <div id="accordion"> <h3 style="font-size:16px">header 3</h3> <div> <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> <font color="#5a5453"> 4. The actual IoT platform that builds, connects and manages includes all APIs, Web services, application services, agents, connectivity etc </font> </td> </tr> <tr> <td></td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </div> 

Answer 1

快速修复，在您的手风琴选项中设置collapsible:true 。 例如

$("#accordion").accordion({
   collapsible: true
});

见JsFiddle

Answer 2

手风琴不允许同时打开一个以上的内容面板。阅读有关手风琴的JQuery UI文档 。通常，您可以用几行jquery代码本身来编写要实现的目标，如下所示

$('#accordion').click(function() {
    $(this).next().toggle('slow');
});

演示版

Answer 3

http://jsfiddle.net/g8yoqmsL粘贴了您的代码并固定在小提琴中。

 $( "#accordion" ).accordion({
   collapsible: true
 });

此处的文档http://jqueryui.com/accordion/#collapsible