嵌套排序不正确 collapsing/expanding

Question

尝试将 nestedSortable jQuery 插件与其网站上提供的示例一起使用时，插件无法正常工作。

拖放有效，但是当我需要 collapse/expand 时出现问题。我使用了另一个问题中建议的解决方案，虽然它适用于两个级别列表，但不适用于 3 个或更多级别。

示例：单击二级元素 (Sub Item 3.2) 后，一级元素 (Item 2) 没有展开，而是关闭了。

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

$('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');
})

嵌套排序不正确 collapsing/expanding

Nested sortable not collapsing/expanding properly

javascript

jquery

jquery-ui

expand

nested-sortable