Question

我正在使用Manuele Sarfatti的nestedSortable（http://mjsarfatti.com/sandbox/nestedSortable/）来创建一个可存储和嵌套的列表。我通过额外的jQuery使我的列表可折叠（我没有修改原始的插件脚本），使脚本更进一步。我想在列表项中显示打开和关闭的箭头图标，以指示它们处于折叠和展开状态的时间。我几乎有这个工作，除了当父母不再有孩子时我似乎无法删除箭头图标。要创建箭头图标，我将“ArrowOpen”类添加到任何具有子项的父项，并使用jQuery UI更改事件删除该类的所有实例，然后在每次对列表进行排序（或更改）时重新应用该类。例如：

$("ul.sortable li:has(ul)").addClass("ArrowOpen");

这是我的jsfiddle工作示例：http://jsfiddle.net/qbxWd/

要复制我的问题，请尝试以下操作：将Item-2拖放/嵌套到Item-1中，您将看到Item-1将获得'ArrowOpen'类并将显示一个打开的箭头图标。现在，将Item-2移回根级别，您将看到Item-1继续保留'ArrowOpen'类，并且仍然存在打开的箭头图标。如果此脚本按预期工作，则当Item-2移回根时，Item-1应该丢失箭头图标。

如果有人有任何建议，欢迎任何帮助 - 谢谢！

编辑：在完整披露中，我本周早些时候将其提交到插件的支持论坛：http://bit.ly/uXbfZY

Answer 1

在停止功能中添加此

$("ul.sortable li:has(ul):has(li)").addClass("ArrowOpen");

作为第一行，并删除

$("ul.sortable li:has(ul)").addClass("ArrowOpen");

来自改变功能

注意：

它只是一种解决方法，当您拖动项目时箭头会消失，当您放下它们时，箭头会出现在它应该的位置。
多次调用“更改”功能，如果我是正确的，每次将它从一个项目拖动到另一个项目而不释放。

我希望这有帮助！

小提琴http://jsfiddle.net/envy/qbxWd/5/

修改

更好的方法，在“停止”功能
中添加以下两行作为第一行
$("ul.sortable li").removeClass("ArrowOpen"); $("ul.sortable li:has(ul):has(li)").addClass("ArrowOpen");

并从“更改”功能中删除所有内容，它将产生所需的效果，并且每次移动项目时都不会调用“removeClass”而不释放它。

<强> EDIT2

如果你想让它与许多嵌套的sortables一起工作，我建议另一个选项使用递归函数将“ArrowOpen”应用于所有带有子li的ul的li。

Fiddle demo

<强> EDIT3 您可以通过避免折叠节点丢失其类来更进一步。将not（'。collapsed'）添加到add class语句中。 e.g。

$（“ul.sortable li：has（ul）：has（li）＆gt; div＆gt; a：not（.ArrowOpen-closed）”）。addClass（'ArrowOpen'）;

jQuery UI：删除change事件上的类（nestedSortable插件）

1 个答案: