javascript - 嵌套可排序无法正确折叠/展开

Question

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

拖放可以工作，但是当我需要折叠/展开时就会出现问题。我使用了另一个问题中建议的解决方案，虽然它适用于两个级别的列表，但不适用于 3 个或更多级别。

示例:单击第二级元素(子项 3.2)后，不是展开它，而是展开第一级元素(项目 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');
})