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

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

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

Demo

Answer 3

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

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

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

jquery ui手风琴只需单击即可扩展，但不会在第二次点击时折叠

3 个答案: