Question

我遇到了手风琴可分类互动的问题。应该可以拖动<h3>元素并更改其顺序。我试图使用官方演示（here）中的函数，但排序不起作用。

以下是完整示例的CodePen：https://codepen.io/pprunesquallor/pen/awWREP

（我的脚本确实包含其他内容（用于图标，折叠和调整大小），但我不想排除那些因为我想在其上构建的内容。）

  $( function() {

    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true,
        heightStyle: "fill"
    });

    $( "#accordion-resizer" ).resizable({
      minHeight: 140,
      minWidth: 200,
      resize: function() {
        $( "#accordion" ).accordion( "refresh" );
      }
    });

  $("#accordion")
    .accordion({
      header: " > h3"
    })
    .sortable({
      axis: "y",
      handle: "h3",
      stop: function(event, ui) {
        ui.item.children("h3").triggerHandler("focusout");
        $(this).accordion("refresh");
      }
    });

  });

我在其他用户处发现了类似的问题，他的问题并未将<h3>和<p>元素包含在其他<div>内，所以我假设这也是必须做的使用“＆gt; div＆gt; h3”和我的HTML，但我尝试了所有组合，但都没有工作......

提前致谢。

Answer 1

只需添加您的项目，如下所示：.group字段缺失：

＆＃13;

   
  $( function() {

    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

$("#accordion")
    .accordion({
      icons: icons,
      collapsible: true,
      heightStyle: "fill",
      header: "> div > h3"
    })
    .sortable({
      axis: "y",
      handle: "h3",
      stop: function(event, ui) {
        ui.item.children("h3").triggerHandler("focusout");
        $(this).accordion("refresh");
      }
    });
    $( "#accordion-resizer" ).resizable({
      minHeight: 140,
      minWidth: 200,
      resize: function() {
        $( "#accordion" ).accordion( "refresh" );
      }
    });

  

  });

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<body>

  <div id="accordion-resizer" class="ui-widget-content">
    <div id="accordion">
      <div class="group">
        <h3>I'm open by default</h3>
        <div>
          <p>
            One
          </p>
        </div>
      </div>
      <div class="group">
        <h3>Open me!</h3>
        <div>
          <p>
            Two
          </p>
        </div>
      </div>
      <div class="group">
        <h3>Open me, you won't regret it!</h3>
        <div>
          <p>
            Three
          </p>
        </div>
      </div>
      <div class="group">
        <h3>I'm the one you're looking for!!</h3>
        <div>
          <p>
            JK, nothing in here
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

＆＃13;

jQuery UI - 手风琴 - 可排序的问题

1 个答案: