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

发布于 2025-01-10 06:39:21 字数 917 浏览 1 评论 0原文

好吧，这是一个有点异国情调的尝试...

我有一个 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 元素。因此，在上面的示例中，第一个 topCollapsible li 元素应该折叠元素 2-6。

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

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

原文

Okay, this is a somewhat exotic attempt...

I have a ui-sortable list, where elements can have different classes, for example

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

I want to retain the ability to drag and drop any element to any position, but at the same time I would like a click on a topCollapsible class to collapse all elements below it, down to the next topCollapsible element. So in the example above, the first topCollapsible li element should collapse the elements 2-6.

The same goes for the mediumCollapsible element, which in the example above should collapse elements 5 and 6.

Is there any way to achieve this? Here's the code in codepen: https://codepen.io/tenshis/pen/jOaeRPg

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你是我的挚爱i 2025-01-17 06:39:21

请考虑以下事项。

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

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

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

Consider the following.

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

This uses Items instead of Cancel. See Demo: https://jqueryui.com/sortable/#items

The advantage here is that items cannot be put outside of a "parent". Whereas if you used Cancel, you could drop content above the top.

For the collapse, we use .nextUntil() and .toggle(). See more:

回复收藏 0 原文

~没有更多了~