如何在单击标题时展开/折叠树节点？

在前端开发中，可以通过使用一些技术和方法来实现在单击标题时展开/折叠树节点的功能。以下是一种常见的实现方式：

HTML结构：使用无序列表（<ul>）和列表项（<li>）来构建树形结构。每个列表项包含一个标题和一个子列表。

<ul>
  <li>
    <span class="title">节点1</span>
    <ul>
      <li>子节点1</li>
      <li>子节点2</li>
    </ul>
  </li>
  <li>
    <span class="title">节点2</span>
    <ul>
      <li>子节点3</li>
      <li>子节点4</li>
    </ul>
  </li>
</ul>

CSS样式：使用CSS样式来控制节点的展开和折叠状态。通过设置display属性来隐藏或显示子列表。

ul ul {
  display: none; /* 默认隐藏子列表 */
}

ul li.open > ul {
  display: block; /* 当父节点有.open类时显示子列表 */
}

JavaScript交互：使用JavaScript来处理单击事件，切换节点的展开和折叠状态。可以通过添加或移除类名来改变节点的样式。

// 获取所有标题元素
var titles = document.getElementsByClassName('title');

// 绑定单击事件处理程序
for (var i = 0; i < titles.length; i++) {
  titles[i].addEventListener('click', function() {
    var parent = this.parentNode;
    if (parent.classList.contains('open')) {
      parent.classList.remove('open'); // 移除.open类，折叠节点
    } else {
      parent.classList.add('open'); // 添加.open类，展开节点
    }
  });
}

通过以上步骤，就可以实现在单击标题时展开/折叠树节点的功能。当单击标题时，通过JavaScript代码切换节点的展开和折叠状态，并通过CSS样式来显示或隐藏子列表。这样用户就可以方便地浏览和操作树形结构的数据。

对于腾讯云相关产品和产品介绍链接地址，可以根据具体需求和场景选择适合的产品。腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储、人工智能等。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多信息。