嵌套的可排序项无法正确折叠/展开

Question

当尝试在其网站上提供的示例中使用nestedSortable jQuery插件时，该插件无法正常工作。

拖放有效，但是当我需要折叠/展开时会出现问题。 我使用了另一个问题中建议的解决方案，尽管该解决方案适用于两个级别的列表，但不适用于3个或更多级别。

示例 ：在单击第二级元素（ Sub Item 3.2 ）后，没有展开它，而是关闭了第一级元素（ Item 2 ）。

我正在寻找一种适用于3个或更多级别的解决方案。

https://jsfiddle.net/vs535823/

 $('ol.sortable').nestedSortable({ forcePlaceholderSize: true, handle: 'div', helper: 'clone', items: 'li', opacity: .6, placeholder: 'placeholder', revert: 250, tabSize: 25, tolerance: 'pointer', toleranceElement: '> div', maxLevels: 3, isTree: true, expandOnHover: 700, startCollapsed: true }); //The following has to be added, collapse/expand still doesn't work properly $('.mjs-nestedSortable-collapsed').on('click', function() { $(this).toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded'); }); $('.mjs-nestedSortable-expanded').on('click', function() { $(this).toggleClass('mjs-nestedSortable-expanded').toggleClass('mjs-nestedSortable-collapsed'); }); 

 ol.sortable, ol.sortable ol { margin: 0 0 0 25px; padding: 0; list-style-type: none; } ol.sortable { margin: 4em 0; } .sortable li { margin: 5px 0 0 0; padding: 0; } .sortable li div { border: 1px solid #d4d4d4; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border-color: #D4D4D4 #D4D4D4 #BCBCBC; padding: 6px; margin: 0; cursor: move; background: #f6f6f6; background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed)); background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); } .sortable li.mjs-nestedSortable-branch div { background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #f0ece9 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #f0ece9 100%); } .sortable li.mjs-nestedSortable-leaf div { background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #bcccbc 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #bcccbc 100%); } .sortable li.mjs-nestedSortable-collapsed>ol { display: none; } .sortable li.mjs-nestedSortable-branch>div>.disclose { display: inline-block; } .sortable li.mjs-nestedSortable-collapsed>div>.disclose>span:before { content: '+ '; } .sortable li.mjs-nestedSortable-expanded>div>.disclose>span:before { content: '- '; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script> <script src="https://cdn.rawgit.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script> <script src="https://cdn.rawgit.com/mjsarfatti/nestedSortable/master/jquery.mjs.nestedSortable.js"></script> <ol id="first" class="sortable ui-sortable"> <li id="list_4" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded"> <div><span class="disclose"><span></span></span>Item 2</div> <ol> <li id="list_7" class="mjs-nestedSortable-branch mjs-nestedSortable-collapsed" style="display: list-item;"> <div><span class="disclose"><span></span></span>Sub Item 3.2</div> <ol> <li id="list_8" class="mjs-nestedSortable-leaf"> <div><span class="disclose"><span></span></span>Sub Item 3.2.1</div> </li> </ol> </li> <li id="list_2" class="mjs-nestedSortable-leaf" style="display: list-item;"> <div><span class="disclose"><span></span></span>Sub Item 1.1</div> </li> </ol> </li> <li id="list_1" class="mjs-nestedSortable-leaf" style="display: list-item;"> <div><span class="disclose"><span></span></span>Item 1</div> </li> <li id="list_3" class="mjs-nestedSortable-leaf" style="display: list-item;"> <div><span class="disclose"><span></span></span>Sub Item 1.2</div> </li> <li id="list_5" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded"> <div><span class="disclose"><span></span></span>Item 3</div> <ol> <li id="list_6" class="mjs-nestedSortable-no-nesting mjs-nestedSortable-leaf"> <div><span class="disclose"><span></span></span>Sub Item 3.1 (no nesting)</div> </li> </ol> </li> </ol> 

Answer 1

javascript代码中的这一部分丢失了：

$('.disclose').on('click', function() {
    $(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
})