使用 ui-sortable 时使 li 元素折叠下面的元素

Question

好吧，这是一个有点奇特的尝试...

我有一个 ui 可排序列表，其中元素可以有不同的 class，例如

<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 class 以折叠其下方的所有元素，向下到下一个 topCollapsible 元素。所以在上面的例子中，第一个 topCollapsible li 元素应该折叠元素 2-6.

mediumCollapsible 元素也是如此，在上面的示例中应该折叠元素 5 和 6。

有什么办法可以实现吗？这是codepen中的代码：https://codepen.io/tenshis/pen/jOaeRPg

Answer 1

考虑以下因素。

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

这里的优点是项目不能放在“父级”之外。而如果您使用取消，则可以将 content 放在顶部上方。

对于崩溃，我们使用.nextUntil()和.toggle()。查看更多：

使用 ui-sortable 时使 li 元素折叠下面的元素

Make li element collapse elements below when using ui-sortable

jquery

jquery-ui

jquery-ui-sortable