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

问题描述：

我遇到了手风琴可排序交互的问题。应该可以拖动<h3>元素并更改它们的顺序。我试图使用官方演示（here）的功能，但排序不“工作”。jQuery UI - 手风琴 - 可排序的问题

这里是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"); 
     } 
    }); 

    });

我在这里发现了类似的问题由其他用户，他的问题不封闭的内部附加<div>的<h3>和<p>元素，因此我假设这也与“> DIV> H3做“和我的HTML，但我试过所有的组合，没有工作...

在此先感谢。

答

只需添加您的项目如下，。集团现场丢失：


 
    $(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"); 
 
     } 
 
    }); 
 

 
    
 

 
    });

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

戈文德，谢谢！对不起，但我不明白你在那里做了什么。除了“header：”> div> h3“”之外，你没有改变任何东西，并且在html中添加了类组？ –

是的，我只是做了这些改变 –

谢谢。我注意到你从我的代码中排除了这部分：$（“#accordion”）.accordion（{ 图标：图标，可折叠：true， heightStyle：“fill” }）; - （所以它不再可折叠）你能解释为什么吗？我注意到，如果包含它，它会打破手风琴，但我不明白为什么... –

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

相关推荐