jquery ui手风琴一键展开，但第二次点击不折叠答案

【问题标题】：jquery ui accordion expanding in one click but not collapsing in second clickjquery ui手风琴一键展开，但第二次点击不折叠
【发布时间】：2017-01-09 07:03:13
【问题描述】：

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

$(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>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap jquery-ui

【解决方案1】：

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

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

见JsFiddle

【讨论】：

【解决方案2】：

手风琴不允许同时打开多个内容面板。阅读 JQuery UI documentation 了解手风琴。通常您想要实现的目标可以用几行 jquery 代码本身编写，如下所示

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

Demo

【讨论】：

【解决方案3】：

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

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

这里有文档http://jqueryui.com/accordion/#collapsible

【讨论】：