好吧，這是一個有點異國情調的嘗試......
我有一個 ui-sortable 串列，其中元素可以有不同的類，例如
<ul id="items"> //sortable
<li class="topCollapsible">...</li>
<li class="content">...</li>
<li class="content">...</li>
<li class="mediumCollapsible">...</li>
<li class="content">...</li>
<li class="content">...</li>
<li class="topCollapsible">...</li>
<li class="content">...</li>
</ul>
我想保留將任何元素拖放到任何位置的能力，但同時我想點擊一個topCollapsible類來折疊它下面的所有元素，直到下一個topCollapsible元素。所以在上面的例子中，第一個topCollapsibleli 元素應該折疊元素 2-6。
元素也是如此mediumCollapsible，在上面的示例中應該折疊元素 5 和 6。
有什么辦法可以做到這一點？這是codepen中的代碼：https ://codepen.io/tenshis/pen/jOaeRPg
uj5u.com熱心網友回復：
考慮以下。
$(function() {
$("#items").sortable({
items: ".content"
}).disableSelection();
$(".topCollapsible, .mediumCollapsible").click(function() {
$(this).nextUntil(":not(.content)").toggle();
});
});.box {
width: 150px;
height: 20px;
border-width: 2px;
border-style: solid;
padding: 2px;
cursor: move;
}
ul {
list-style-type: none;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<ul id="items">
<li class="topCollapsible">
<div class="box"><b>topCollapsible</b></div>
</li>
<li class="content">
<div class="box">--</div>
</li>
<li class="content">
<div class="box">--</div>
</li>
<li class="mediumCollapsible">
<div class="box">mediumCollapsible</div>
</li>
<li class="content">
<div class="box">--</div>
</li>
<li class="content">
<div class="box">--</div>
</li>
<li class="topCollapsible">
<div class="box"><b>topCollapsible</b></div>
</li>
<li class="content">
<div class="box">--</div>
</li>
</ul>這使用專案而不是取消。見演示：https ://jqueryui.com/sortable/#items
這里的優點是專案不能放在“父級”之外。而如果您使用 Cancel，則可以下降content到頂部上方。
對于崩潰，我們使用.nextUntil()and .toggle()。查看更多：
- https://api.jquery.com/nextutil/
- https://api.jquery.com/toggle/
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/435196.html
標籤：jQuery jQuery-ui jquery-ui-可排序