javascript css实现三级目录(简单的)

来介绍一下如何使用Javascript和CSS实现简单的三级目录。

1. 准备工作

在HTML中，首先需要准备一个嵌套的列表结构，用来表示三级目录的层次关系。可以使用无序列表（ul）和有序列表（ol）嵌套的方式来构建，例如：

<ul>
  <li>
    <a href="#">Item 1</a>
    <ul>
      <li>
        <a href="#">Subitem 1.1</a>
        <ul>
          <li><a href="#">Subsubitem 1.1.1</a></li>
          <li><a href="#">Subsubitem 1.1.2</a></li>
          <li><a href="#">Subsubitem 1.1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Subitem 1.2</a></li>
      <li><a href="#">Subitem 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

2. 使用CSS样式实现菜单的显示与隐藏

通过CSS样式设置，可以将子菜单一开始隐藏，只有在鼠标悬停在父菜单上时才显示出来。具体实现可以使用伪类:hover，例如：

/* 隐藏所有子菜单 */
ul ul {
  display: none;
}

/* 当鼠标悬停在父菜单上时，显示对应的子菜单 */
ul li:hover > ul {
  display: block;
}

其中，ul li:hover > ul 表示当鼠标悬停在父级li元素上时，选择其子元素（下一级的ul）进行操作，使其显示出来。

3. 使用Javascript实现深度遍历

通过Javascript代码实现深度遍历，可以将菜单的层次结构完整地展示出来。代码示例如下：

// 获取所有菜单项
var items = document.querySelectorAll('li');

// 对每一个菜单项进行深度遍历
for (var i = 0; i < items.length; i++) {
  var item = items[i];

  // 为每个菜单项添加点击事件
  item.addEventListener('click', function (event) {

    // 阻止默认点击行为
    event.preventDefault();

    // 遍历菜单项的所有祖先元素
    var ancestor = this.parentNode;
    while (ancestor.nodeName !== 'UL') {
      ancestor = ancestor.parentNode;
    }

    // 展开或收起对应的子菜单
    if (ancestor.classList.contains('expanded')) {
      ancestor.classList.remove('expanded');
    } else {
      ancestor.classList.add('expanded');
    }
  });
}

该代码首先获取所有的菜单项（即li元素），然后对每一个菜单项进行深度遍历。在每个菜单项上添加点击事件，通过event.preventDefault()方法阻止默认的链接跳转行为。然后遍历菜单项的所有祖先元素（即包裹它的ul元素），找到对应的子菜单并展开或收起。

示例说明

下面分别是两个使用了以上实现方法的三级目录示例。你可以查看源代码来了解具体实现细节。

示例1：无序列表嵌套的三级目录

示例1代码

示例2：有序列表嵌套的三级目录

示例2代码

以上就是Javascript CSS实现三级目录的完整攻略，希望能对你有所帮助！