javascript - jQuery UI + Bootstrap 3 可排序 Accordion 无法正常工作

Question

我想构建一个具有拖放排序功能的 Accordion 菜单，我可以使用 bootstrap 3 + jQuery UI 来构建它，但问题是 jQuery UI 与 bootstrap Accordion 的一般操作相冲突。我非常具体地使用 Bootstrap Accordion，但我需要解决 jQuery UI 产生的问题。

• 有时在排序时任一选项卡都会消失
• 当一个选项卡打开并排序时，只有在单击另一个选项卡时才会关闭。
• 打开选项卡时排序顺序安排不当。

我已经把它合并到一个 plnkr 中了

$(function(){
   $( "#accordion" ).accordion().sortable({
      connectWith: "#dropBag"
   }); 

   $( "#dropBag" ).sortable({
      connectWith: "#accordion"
   }); 
});

http://plnkr.co/edit/LpQuO9nfB4d5Nwhaj6my?p=preview

请帮助。

Answer 1

您的脚本中有一个小错误 - accordion() 应替换为 collapse()(请参阅 documentation 中的折叠段落。按如下方式重写您的代码:

$(function(){
   $( "#accordion" ).collapse().sortable({
      connectWith: "#dropBag"
   }); 

   $( "#dropBag" ).sortable({
      connectWith: "#accordion"
   }); 
});

此外，在您的标记 (dropBag) 末尾有一个未关闭的 div。我会在了解您遇到的排序问题后立即更新我的答案。