Вложенный сортируемый, не разрушающийся / расширяющийся должным образом

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

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

Пример: после нажатия на элемент 2-го уровня (Sub Item 3.2) вместо расширения элемента 1-го уровня (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>

Источник

1 ответ

Решение

Эта часть в коде JavaScript отсутствовала:

$('.disclose').on('click', function() {
    $(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
})
Источник
Другие вопросы по тегам