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，但我試過所有的組合，沒有工作...

在此先感謝。

來源

2017-06-21 P. Prunesquallor

只需添加您的項目如下，。集團現場丟失：


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

來源

2017-06-21 09:45:01

戈文德，謝謝！對不起，但我不明白你在那裏做了什麼。除了「header：」> div> h3「」之外，你沒有改變任何東西，並且在html中添加了類組？ –

是的，我只是做了這些改變 –

謝謝。我注意到你從我的代碼中排除了這部分：$（「#accordion」）.accordion（{ 圖標：圖標，可摺疊：true， heightStyle：「fill」 }）; - （所以它不再可摺疊）你能解釋爲什麼嗎？我注意到，如果包含它，它會打破手風琴，但我不明白爲什麼... –

jQuery UI - 手風琴 - 可排序的問題

回答

相關問題