如何实现TreeView的全部展开与折叠按钮功能？

一、自定义TreeView结构的实现 #

假设你的TreeView是基于嵌套ul/li的自定义结构，以下是完整实现代码：

HTML结构

<div class="tree-view">
  <ul>
    <li>
      <span class="toggle"></span> 父节点1
      <ul>
        <li>子节点1-1</li>
        <li>
          <span class="toggle"></span> 子节点1-2
          <ul>
            <li>孙节点1-2-1</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <span class="toggle"></span> 父节点2
      <ul>
        <li>子节点2-1</li>
      </ul>
    </li>
  </ul>
</div>

<button id="expand-all">展开所有节点</button>
<button id="collapse-all">折叠所有节点</button>

基础CSS（控制显示/隐藏与触发器样式）

/* 默认隐藏子层级 */
.tree-view ul ul {
  display: none;
  margin-left: 16px;
}
/* 展开/折叠触发器样式 */
.tree-view .toggle {
  cursor: pointer;
  user-select: none;
  margin-right: 8px;
  display: inline-block;
  width: 12px;
  text-align: center;
}
/* 展开/折叠状态的触发器文本 */
.tree-view li.expanded .toggle::before {
  content: "-";
}
.tree-view li:not(.expanded) .toggle::before {
  content: "+";
}

jQuery逻辑代码

// 单个节点的展开/折叠切换
$('.tree-view .toggle').on('click', function() {
  const $parentLi = $(this).closest('li');
  $parentLi.toggleClass('expanded');
  $parentLi.find('> ul').toggle();
});

// 点击按钮展开所有节点
$('#expand-all').on('click', function() {
  $('.tree-view li').addClass('expanded');
  $('.tree-view ul ul').show();
});

// 点击按钮折叠所有节点
$('#collapse-all').on('click', function() {
  $('.tree-view li').removeClass('expanded');
  $('.tree-view ul ul').hide();
});

二、第三方TreeView插件的实现（以jQuery UI TreeView为例） #

如果使用成熟的TreeView插件（比如jQuery UI的TreeView组件），直接调用插件自带API更稳定：

// 展开所有节点（带动画）
$('#expand-all').click(function() {
  $('#your-tree-id').treeview('expandAll', { duration: 200 });
});

// 折叠所有节点（带动画）
$('#collapse-all').click(function() {
  $('#your-tree-id').treeview('collapseAll', { duration: 200 });
});

注意事项 #

• 替换代码中的选择器（比如.tree-view、#your-tree-id）为你项目中的实际选择器
• 如需动画效果，可将show()/hide()替换为slideDown()/slideUp()，toggle()替换为slideToggle()
• 不同第三方插件的API存在差异，优先查阅对应插件的官方文档

内容的提问来源于stack exchange，提问作者Saty ntod