JS+CSS简单树形菜单实现方法

下面是 "JS+CSS简单树形菜单实现方法" 的完整攻略：

1. 目标

本教程旨在讲解如何使用 JavaScript 和 CSS 技术实现简单的树形菜单，并包含两个示例说明以供参考。

2. 实现过程

2.1 HTML 结构

首先，需要一个 HTML 结构，用于展示树形菜单。这里使用 \<ul> 和 \<li> 元素来实现，代码如下：

<ul id="tree">
  <li>第一级</li>
  <li>第一级
    <ul>
      <li>第二级</li>
      <li>第二级</li>
      <li>第二级</li>
    </ul>
  </li>
  <li>第一级</li>
</ul>

其中，ul 元素的 id 属性为 "tree"，用于方便后续 JavaScript 代码的获取。

2.2 CSS 样式

接下来，需要使用 CSS 技术来美化菜单样式。这里使用了一些基本的 CSS 样式设计，代码如下：

ul {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

li {
  margin-bottom: 5px;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background-color 0.3s;
}

li:hover {
  background-color: #f0f0f0;
}

ul ul {
  margin-left: 10px;
  display: none;
}

li.has-children:before {
  content: "+ ";
  float: left;
  margin-right: 5px;
}

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

li.has-children:hover:before {
  color: #333;
}

其中，样式包括：

对 UL 和 LI 元素的基本样式设置，如去除列表标志、设置间距等
对菜单项进行排版美化，如设置圆角边框、背景颜色等
设置菜单项的 hover 样式，用于提示用户当前选择的菜单项
对菜单项的子级列表进行层级间距调整，以及隐藏子级列表的样式设置
对含有子级的菜单项添加前缀可以展开及折叠子级菜单的“+/-”号，并且设置鼠标移入时的字体颜色变化

2.3 JavaScript 代码

最后，我们需要使用 JavaScript 代码来实现树形菜单的功能。具体实现分为以下几步。

2.3.1 获取元素

需要使用 document.getElementById() 方法获取树形菜单的 UL 元素。代码如下：

const tree = document.getElementById('tree');

2.3.2 事件监听

首先，为每个含有子级的菜单项添加 click 事件监听器。并在监听器中 toggle 该菜单项的 open 类属性。

document.querySelectorAll('li.has-children').forEach((li) => {
  li.addEventListener('click', () => {
    li.classList.toggle('open');
  });
});

这样，当用户点击一个带有子级的菜单项时，其展开状态（即“+/-”号的状态）将发生变化。

2.3.3 子菜单展示

接着，为菜单项添加鼠标进入事件的监听器。当用户鼠标进入某个菜单项时，将显示该菜单项的子级列表。反之，则隐藏该列表。

document.querySelectorAll('li.has-children').forEach((li) => {
  li.addEventListener('mouseover', () => {
    const ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'block';
    }
  });

  li.addEventListener('mouseout', () => {
    const ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'none';
    }
  });
});

2.3.4 完整代码

最终，树形菜单的完整代码如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>JS+CSS简单树形菜单实现方法</title>
  <style>
    ul {
      list-style: none;
      padding-left: 0;
      margin-top: 10px;
    }

    li {
      margin-bottom: 5px;
      padding: 5px 10px;
      border-radius: 3px;
      transition: background-color 0.3s;
    }

    li:hover {
      background-color: #f0f0f0;
    }

    ul ul {
      margin-left: 10px;
      display: none;
    }

    li.has-children:before {
      content: "+ ";
      float: left;
      margin-right: 5px;
    }

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

    li.has-children:hover:before {
      color: #333;
    }
  </style>
</head>
<body>
  <ul id="tree">
    <li>第一级</li>
    <li>第一级
      <ul>
        <li>第二级</li>
        <li>第二级
          <ul>
            <li>第三级</li>
            <li>第三级</li>
          </ul>
        </li>
        <li>第二级</li>
      </ul>
    </li>
    <li>第一级</li>
  </ul>

  <script>
    const tree = document.getElementById('tree');
    document.querySelectorAll('li.has-children').forEach((li) => {
      li.addEventListener('click', () => {
        li.classList.toggle('open');
      });

      li.addEventListener('mouseover', () => {
        const ul = li.querySelector('ul');
        if (ul) {
          ul.style.display = 'block';
        }
      });

      li.addEventListener('mouseout', () => {
        const ul = li.querySelector('ul');
        if (ul) {
          ul.style.display = 'none';
        }
      });
    });
  </script>
</body>
</html>

3. 示范说明

下面是两个树形菜单的设计示例：

3.1 示例 1

本示例中，我们使用了一些特别的样式，并使用的是垂直方向的树布局。具体实现请见以下代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>示例 1</title>
  <style>
    ul {
      list-style: none;
      margin-top: 10px;
    }

    li {
      padding: 8px 16px;
      position: relative;
    }

    li:before, li:after {
      content: "";
      position: absolute;
      top: 50%;
      border-style: solid;
      border-width: 0 1px;
    }

    li:before {
      left: -16px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0;
    }

    li:after {
      left: -8px;
      border-top-width: 7px;
      border-bottom-width: 0;
      border-left-width: 1px;
    }

    li:first-child:before {
      top: 22px;
    }

    li:last-child:after {
      border-top-width: 0;
      border-bottom-width: 1px;
      top: -1px;
    }

    li.open ul {
      display: block;
    }

    li:hover {
      background-color: #E3F2FD;
    }

    ul ul {
      display: none;
      padding-left: 20px;
    }

    li:last-child ul li:before {
      display: none;
    }
  </style>
</head>
<body>
  <ul id="tree">
    <li>第一级</li>
    <li>第一级
      <ul>
        <li>第二级</li>
        <li>第二级
          <ul>
            <li>第三级</li>
            <li>第三级</li>
          </ul>
        </li>
        <li>第二级</li>
      </ul>
    </li>
    <li>第一级</li>
  </ul>

  <script>
    const tree = document.getElementById('tree');
    document.querySelectorAll('li.has-children').forEach((li) => {
      li.addEventListener('click', () => {
        li.classList.toggle('open');
      });
    });
  </script>
</body>
</html>

3.2 示例 2

本示例中，我们使用的是横向方向的树布局，并使用了自定义样式来完成。这个示例的设计可以拿来实现左侧导航菜单，具体实现请见以下代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>示例 2</title>
  <style>
    ul {
      list-style: none;
      margin-top: 10px;
      font-family: "Microsoft YaHei", sans-serif;
    }

    li {
      display: inline-block;
      position: relative;
    }

    li>a {
      color: #333;
      display: block;
      padding: 8px 16px;
      border-radius: 3px;
    }

    li>a:focus, li>a:hover {
      background-color: #f0f0f0;
    }

    li.open>a, li>a.active {
      background-color: #4CAF50;
      color: #fff;
    }

    li.open>a:hover, li>a.active:hover {
      background-color: #4CAF50;
    }

    ul ul {
      visibility: hidden;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: rgba(0, 0, 0, 0.3) 0 1px 6px;
      z-index: 1;
    }

    li:hover>ul {
      visibility: visible;
    }

    ul ul li {
      clear: both;
      width: 100%;
    }

    ul ul li>a {
      padding: 6px 8px;
      margin-left: -96px;
      background-color: #fff;
    }

    ul ul ul li>a {
      padding-left: 20px;
    }

    li:hover>a {
      background-color: #f0f0f0;
    }

    li.has-children:after {
      content: "+";
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50%);
      font-size: 14px;
    }

    li.open.has-children:after {
      content: "-";
    }
  </style>
</head>
<body>
  <ul id="tree">
    <li><a href="#">第一级</a></li>
    <li class="has-children"><a href="#">第一级</a>
      <ul>
        <li><a href="#">第二级</a></li>
        <li><a href="#">第二级</a>
          <ul>
            <li><a href="#">第三级</a></li>
            <li><a href="#">第三级</a></li>
          </ul>
        </li>
        <li><a href="#">第二级</a></li>
      </ul>
    </li>
    <li><a href="#">第一级</a></li>
    <li class="has-children"><a href="#">第一级</a>
      <ul>
        <li><a href="#">第二级</a></li>
        <li><a href="#">第二级</a>
          <ul>
            <li><a href="#">第三级</a></li>
            <li><a href="#">第三级</a>
              <ul>
                <li><a href="#">第四级</a></li>
                <li><a href="#">第四级</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <script>
    const tree = document.getElementById('tree');
    document.querySelectorAll('li.has-children').forEach((li) => {
      li.addEventListener('click', () => {
        li.classList.toggle('open');
      });
    });
  </script>
</body>
</html>

4. 总结

以上就是实现 "JS+CSS简单树形菜单" 的完整攻略及两个示例的说明。如果你在实际应用中遇到问题，可以进一步查阅相关文档或资料，也可以在社区上进行提问。希望你能通过本教程快速掌握实现树形菜单的技巧，愉快的编写你的项目代码！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+CSS简单树形菜单实现方法 - Python技术站