如何用单个按钮实现Nestable树形结构的展开/折叠切换？

很简单，我们只需要通过状态跟踪或者DOM状态检测来判断当前树的状态，然后在按钮点击时执行对应的操作，同时切换按钮文本即可。下面是具体实现步骤：

1. 添加切换按钮的HTML #

先在你的树形结构上方添加一个按钮，给它一个唯一ID方便绑定事件：

<button id="toggleTreeBtn">折叠全部</button>

<div id="tree" class="dd">
  <ol class="dd-list">
    <li class="dd-item" data-id="1">
      <div class="dd-handle">Item 1</div>
    </li>
    <li class="dd-item" data-id="2">
      <div class="dd-handle">Item 2</div>
    </li>
    <li class="dd-item" data-id="3">
      <div class="dd-handle">Item 3</div>
      <ol class="dd-list">
        <li class="dd-item" data-id="4">
          <div class="dd-handle">Item 4</div>
        </li>
        <li class="dd-item" data-id="5">
          <div class="dd-handle">Item 5</div>
        </li>
      </ol>
    </li>
  </ol>
</div>

2. 实现切换逻辑（两种方案可选） #

方案一：用状态变量跟踪（高效简洁） #

适合用户不会手动修改单个节点展开/折叠状态的场景，通过变量记录当前树的整体状态：

// 初始化状态：页面加载时树默认是展开状态，所以设为true
let isTreeExpanded = true;

// 绑定按钮点击事件
$('#toggleTreeBtn').on('click', function() {
  const $tree = $('#tree');
  
  if (isTreeExpanded) {
    // 当前是展开状态，执行折叠
    $tree.nestable('collapseAll');
    $(this).text('展开全部');
  } else {
    // 当前是折叠状态，执行展开
    $tree.nestable('expandAll');
    $(this).text('折叠全部');
  }
  
  // 切换状态
  isTreeExpanded = !isTreeExpanded;
});

方案二：检测DOM实际状态（更精准） #

如果用户可能手动展开/折叠单个节点，用这种方式可以根据树的实际状态判断操作，避免状态变量和实际DOM不一致：

$('#toggleTreeBtn').on('click', function() {
  const $tree = $('#tree');
  
  // 检查树中是否存在未折叠的子节点（即展开的节点）
  const hasExpandedNodes = $tree.find('.dd-list:not(.dd-collapsed)').length > 0;
  
  if (hasExpandedNodes) {
    $tree.nestable('collapseAll');
    $(this).text('展开全部');
  } else {
    $tree.nestable('expandAll');
    $(this).text('折叠全部');
  }
});

注意事项 #

确保你已经正确初始化了Nestable插件，比如页面加载时执行过：

$('#tree').nestable();

这样就能通过单个按钮完美实现展开/折叠的切换啦！

内容的提问来源于stack exchange，提问作者Nurzhan Nogerbek