如何在Jquery中创建自动折叠的所有列表项

How to create auto collapsed all list item in Jquery nestable?

本文关键字:折叠 列表 Jquery 创建      更新时间:2023-09-26

我使用jQuery插件Nestable作为菜单编辑器。我希望所有菜单项都能自动折叠,但也可以在用户单击每个可展开图标时展开。

这是jQuery的插件。

 $(document).ready(function(){
   $("#product_list").nestable({
      maxDepth: 10,
      collapsedClass:'dd-collapsed',
   });
 });

由于plugin中没有太多可用的选项,您可以做的是在nestable创建后手动折叠,如下所示:

$(document).ready(function(){
   $("#product_list").nestable({
      maxDepth: 10,
      collapsedClass:'dd-collapsed',
   }).nestable('collapseAll');//Add this line
   //$("#product_list").nestable('collapseAll') //Or this
});

DEMO在加载时展开视图而不折叠和

DEMO加载折叠视图

直接调用函数:

$('.dd').nestable('collapseAll');

要扩展Guruprasad已经给出了很好的答案的自动折叠,这里有一个简单的方法来删除所有折叠,相当于你的'Collapse all '按钮所做的。

$(".dd-collapsed").removeClass("dd-collapsed");