Вложенная сортировка не сворачивается/расширяется правильно

Question

Плагин jQuery не работает должным образом при попытке использовать его в примере, представленном на его веб-сайте.

Перетаскивание выполняется, но когда мне нужно свернуть/развернуть проблему, возникает проблема. Я использовал решение, предложенное в другом вопросе, и хотя оно работает для двух списков уровней, оно не для 3 или более уровней.

Пример: после нажатия на 2-ом уровне элемента (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 { 
 
\t margin: 0 0 0 25px; 
 
\t padding: 0; 
 
\t list-style-type: none; 
 
} 
 

 
ol.sortable { 
 
\t margin: 4em 0; 
 
} 
 

 
.sortable li { 
 
\t margin: 5px 0 0 0; 
 
\t padding: 0; 
 
} 
 

 
.sortable li div { 
 
\t border: 1px solid #d4d4d4; 
 
\t -webkit-border-radius: 3px; 
 
\t -moz-border-radius: 3px; 
 
\t border-radius: 3px; 
 
\t border-color: #D4D4D4 #D4D4D4 #BCBCBC; 
 
\t padding: 6px; 
 
\t margin: 0; 
 
\t cursor: move; 
 
\t background: #f6f6f6; 
 
\t background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), 
 
\t \t color-stop(47%, #f6f6f6), color-stop(100%, #ededed)); 
 
\t background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); 
 
\t background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); 
 
\t background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); 
 
\t background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%); 
 
\t filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', 
 
\t \t endColorstr='#ededed', GradientType=0); 
 
} 
 

 
.sortable li.mjs-nestedSortable-branch div { 
 
\t background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #f0ece9 100%); 
 
\t background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #f0ece9 100%); 
 
} 
 

 
.sortable li.mjs-nestedSortable-leaf div { 
 
\t background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #bcccbc 100%); 
 
\t background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #bcccbc 100%); 
 
} 
 

 
.sortable li.mjs-nestedSortable-collapsed>ol { 
 
\t display: none; 
 
} 
 

 
.sortable li.mjs-nestedSortable-branch>div>.disclose { 
 
\t display: inline-block; 
 
} 
 

 
.sortable li.mjs-nestedSortable-collapsed>div>.disclose>span:before { 
 
\t content: '+ '; 
 
} 
 

 
.sortable li.mjs-nestedSortable-expanded>div>.disclose>span:before { 
 
\t 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

Эта часть в яваскрипте кода отсутствовала:

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