JavaScript+CSS实现的可折叠二级菜单实例

下面是“JavaScript+CSS实现的可折叠二级菜单实例”的完整攻略。

1. 实现思路

该二级菜单实例的实现思路如下：

1. 初始状态二级菜单处于收缩状态，点击主菜单可以展开或关闭对应的二级菜单。

2. 主菜单和二级菜单分别定义为一组HTML结构，通过CSS样式实现布局和样式。

3. 通过JavaScript事件绑定实现主菜单点击后对应的二级菜单的展开和收缩。

2. HTML结构

<nav class="menu">
  <ul>
    <li class="has-children">
      <a href="#">主菜单1</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
      </ul>
    </li>
    <li class="has-children">
      <a href="#">主菜单2</a>
      <ul>
        <li><a href="#">子菜单3</a></li>
        <li><a href="#">子菜单4</a></li>
      </ul>
    </li>
  </ul>
</nav>

该HTML结构包括一个nav标签，里面有一个无序列表ul，每个li标签表示一个主菜单项，含有一个has-children类，表示该主菜单项有子菜单。每个主菜单项包含一个超链接标签a，点击后可以展开或关闭对应的二级菜单。在每个li标签中，有一个子无序列表ul，表示该主菜单项的二级菜单，里面有多个子菜单项li，每个子菜单项包含一个超链接标签a，用于向对应网页链接。

3. CSS样式

.menu {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.menu > ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.menu a {
  text-decoration: none;
  color: #333;
  display: block;
}

.menu .has-children > a {
  position: relative;
}

.menu .has-children > a:after {
  content: "+";
  display: inline-block;
  font-size: 12px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  text-align: center;
  line-height: 10px;
}

.menu .has-children.open > a:after {
  content: "-";
}

.menu .sub-menu {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: none;
}

.menu .has-children.open > .sub-menu {
  display: block;
  margin: 5px 0 0;
}

该CSS样式中定义了.menu作为二级菜单的容器样式，.menu > ul作为主菜单样式，主菜单项的超链接标签样式为.menu a，具有不同的字体颜色。主菜单项含有子菜单时，会在超链接标签后面出现一个“+”号，表示该主菜单项有子菜单。当主菜单项被点击后，对应的子菜单项将显示出来。对.menu .sub-menu样式的设定，用于定义子菜单的样式，设置了display:none，表示子菜单默认是隐藏状态。

4. JavaScript

const toggleMenu = function() {
  const parentElem = this.parentElement;
  if (parentElem.classList.contains('open')) {
    parentElem.classList.remove('open');
  } else {
    parentElem.classList.add('open');
  }
}

const menuItems = document.querySelectorAll('.menu .has-children > a');
for (let i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', toggleMenu);
}

该JavaScript代码通过querySelectorAll选择所有的主菜单超链接，然后通过addEventListener绑定点击事件处理函数toggleMenu。在toggleMenu事件处理函数中，首先获取对应主菜单项的父元素，判断该父元素是否有.open类，如果有则移除该类，表示将子菜单进行收缩；如果没有则添加.open类，表示展开子菜单。

5. 示例说明

示例一

在主菜单1上单击，将会展开主菜单1的子菜单。

<li class="has-children">
  <a href="#">主菜单1</a>
  <ul>
    <li><a href="#">子菜单1</a></li>
    <li><a href="#">子菜单2</a></li>
  </ul>
</li>

在该例子中，单击主菜单1后，将展开主菜单1下的子菜单。

示例二

在主菜单2上双击，将会让主菜单2的子菜单收缩。

<li class="has-children">
  <a href="#">主菜单2</a>
  <ul>
    <li><a href="#">子菜单3</a></li>
    <li><a href="#">子菜单4</a></li>
  </ul>
</li>

在该例子中，双击主菜单2后，将关闭主菜单2下子菜单的展开状态。