CSS 实现树状结构目录：详细指南

2024-02-09 05:24:31

CSS 实现树状结构目录

树状结构目录是一种常见的导航方式，它可以帮助用户快速浏览和访问网站或应用程序中的不同内容。CSS 实现树状结构目录是一种使用 CSS 代码来创建和控制目录外观和交互的方式。

HTML 代码

要创建树状结构目录，首先需要使用 HTML 代码创建目录的结构。通常情况下，可以使用 <ul> 和 <li> 标签来创建树状结构。<ul> 标签代表无序列表，<li> 标签代表列表项。

<ul id="tree">
  <li>
    <a href="#">节点 1</a>
    <ul>
      <li>
        <a href="#">子节点 1.1</a>
      </li>
      <li>
        <a href="#">子节点 1.2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">节点 2</a>
    <ul>
      <li>
        <a href="#">子节点 2.1</a>
      </li>
      <li>
        <a href="#">子节点 2.2</a>
      </li>
    </ul>
  </li>
</ul>

上面的 HTML 代码创建了一个简单的树状结构目录，其中有 2 个根节点（节点 1 和节点 2）和 4 个子节点（子节点 1.1、子节点 1.2、子节点 2.1 和子节点 2.2）。

CSS 代码

接下来，可以使用 CSS 代码来设置目录的样式。可以使用各种 CSS 属性来控制目录的外观和交互，例如：

display 属性：用于设置元素的显示方式，可以取值 block、inline 或 none。
list-style-type 属性：用于设置列表项的标记类型，可以取值 none、disc、square 等。
margin 和 padding 属性：用于设置元素的边距和内边距。
border 属性：用于设置元素的边框。
color 属性：用于设置元素的颜色。
font-size 属性：用于设置元素的字体大小。
text-align 属性：用于设置元素的文本对齐方式。
cursor 属性：用于设置元素的鼠标悬停时的光标样式。

#tree {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#tree li {
  display: block;
  margin: 0;
  padding: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}

#tree li:hover {
  background-color: #eee;
}

#tree li a {
  text-decoration: none;
  color: #333;
}

#tree li ul {
  display: none;
}

#tree li.active > ul {
  display: block;
}

上面的 CSS 代码设置了目录的外观和交互。它将目录设置为块级元素，并取消了列表项的默认标记。它还设置了目录的边距和内边距，并设置了列表项的边框和光标样式。

当用户将鼠标悬停在列表项上时，列表项的背景颜色会变成浅灰色。当用户单击列表项时，列表项会展开其子列表。

处理交互情况

在某些情况下，您可能需要处理不同的交互情况，例如：

当用户单击列表项时，如何展开或收起子列表？
当用户将鼠标悬停在列表项上时，如何显示不同的样式？
当用户单击列表项的链接时，如何跳转到相应的页面？

这些交互情况可以通过使用 JavaScript 来处理。您可以使用 JavaScript 来监听列表项的点击事件和鼠标悬停事件，然后根据不同的事件执行不同的操作。

// 获取所有列表项
const items = document.querySelectorAll('#tree li');

// 遍历所有列表项
for (const item of items) {
  // 监听列表项的点击事件
  item.addEventListener('click', function () {
    // 展开或收起子列表
    const sublist = this.querySelector('ul');
    sublist.classList.toggle('active');
  });

  // 监听列表项的鼠标悬停事件
  item.addEventListener('mouseover', function () {
    // 显示不同的样式
    this.classList.add('hover');
  });

  // 监听列表项的鼠标移出事件
  item.addEventListener('mouseout', function () {
    // 移除不同的样式
    this.classList.remove('hover');
  });

  // 监听列表项链接的点击事件
  const links = this.querySelectorAll('a');
  for (const link of links) {
    link.addEventListener('click', function (e) {
      // 跳转到相应的页面
      e.preventDefault();
      window.location.href = this.href;
    });
  }
}