树状视图的诅咒选择类似于列表框

树状视图的诅咒选择类似于列表框的解决方法可以使用下面的代码示例来实现：

<!DOCTYPE html>
<html>
<head>
  <title>树状视图的诅咒选择类似于列表框</title>
  <style>
    .tree {
      list-style-type: none;
      padding-left: 20px;
    }

    .tree li {
      position: relative;
      margin-left: -20px;
      padding-left: 20px;
    }

    .tree li::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 0;
      width: 1px;
      height: 100%;
      border-left: 1px solid #ccc;
    }

    .tree li::after {
      content: "";
      position: absolute;
      left: -20px;
      bottom: 0;
      width: 20px;
      height: 1px;
      border-bottom: 1px solid #ccc;
    }

    .tree li:last-child::before {
      height: 50%;
      bottom: auto;
    }

    .tree li:first-child::after {
      display: none;
    }

    .tree li.has-children::after {
      content: "+";
      position: absolute;
      left: -20px;
      bottom: -10px;
      font-weight: bold;
      cursor: pointer;
    }

    .tree li.has-children.open::after {
      content: "-";
    }

    .tree li.selected {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <ul class="tree">
    <li class="has-children">
      Node 1
      <ul class="tree">
        <li class="has-children">
          Node 1.1
          <ul class="tree">
            <li>Node 1.1.1</li>
            <li>Node 1.1.2</li>
            <li>Node 1.1.3</li>
          </ul>
        </li>
        <li>Node 1.2</li>
        <li>Node 1.3</li>
      </ul>
    </li>
    <li class="has-children">
      Node 2
      <ul class="tree">
        <li>Node 2.1</li>
        <li>Node 2.2</li>
        <li>Node 2.3</li>
      </ul>
    </li>
    <li>Node 3</li>
  </ul>

  <script>
    var treeItems = document.querySelectorAll('.tree li.has-children');
    treeItems.forEach(function(item) {
      item.addEventListener('click', function(e) {
        e.stopPropagation();
        this.classList.toggle('open');
      });
    });

    var treeLeafItems = document.querySelectorAll('.tree li:not(.has-children)');
    treeLeafItems.forEach(function(item) {
      item.addEventListener('click', function(e) {
        e.stopPropagation();
        var selectedItems = document.querySelectorAll('.tree li.selected');
        selectedItems.forEach(function(selectedItem) {
          selectedItem.classList.remove('selected');
        });
        this.classList.add('selected');
      });
    });
  </script>
</body>
</html>

这个示例代码创建了一个简单的树状视图，每个节点都可以展开或折叠，叶子节点可以被选择。点击节点时，会添加一个selected类来突出显示所选节点，并将其他已选择节点的selected类移除。

你可以根据需要修改代码来适应你的具体情况。

本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。

展开更多

开发者特惠

面向开发者的云福利中心，ECS 60元/年，域名1元起，助力开发者快速在云上构建可靠应用

ECS首年60元

社区干货

集简云1月新增/更新:新增3大功能,21款集成应用,更新11款应用,新增150多个可用动作

我们对树状下拉结构展现的搜索功能进行了优化。搜索范围由全局搜索调整为当前步骤,搜索框调整为在每个步骤的顶部展示。现在,您可以在每个步骤使用关键词针对性查找当前步骤的输出数据变量。启动搜索后,搜索结果会直接呈现在当前页面,并展示出结果所在的层级,大大方便变量列表的查找。 **应用更新** 01**飞书即时消息**...

由于集群的节点过于庞大,我们需要非常多的 NameNode 实现联邦机制来接入不同上层业务的数据服务。但当 NameNode 数量也变得非常多了以后,用户请求的统一接入及统一视图的管理也会有很大的问题。为了解决用户接入过... 这就要求 HDFS 满足类似于数据库系统中 ACID 特性一样的原子性,一致性、隔离性和持久性。因此 DanceNN 在面对多个用户同时操作同一个文件或者同一个目录时,需要保证不会破坏掉 ACID 属性,需要对操作做锁保护。不...

集简云10月新增5大功能,32款集成应用,更新12款应用,200多个可用动作

经常需要从企业组织架构中选择对应员工,本期功能新增企业员工组织架构支持树状选择的同时可以插入变量,让用户在字段配置时更加灵活。 **应用更新** ... **定时启动任务+Tableau+OA系统:** 每天定时查询Tableau符合特定条件的视图数据,并将查询结果自动发送至OA系统通知相关人员 06**速融云**...