JS三级可折叠菜单实现方法

JS三级可折叠菜单是一种常见的页面交互效果，下面提供一种实现方法。

实现方法

1. HTML结构

首先，需要在HTML结构中定义菜单所需要的层级结构，示例代码如下：

<ul id="menu">
  <li>
    <a href="#">一级菜单1</a>
    <ul>
      <li>
        <a href="#">二级菜单1-1</a>
        <ul>
          <li>
            <a href="#">三级菜单1-1-1</a>
          </li>
          <li>
            <a href="#">三级菜单1-1-2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">二级菜单1-2</a>
        <ul>
          <li>
            <a href="#">三级菜单1-2-1</a>
          </li>
          <li>
            <a href="#">三级菜单1-2-2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">一级菜单2</a>
    <ul>
      <li>
        <a href="#">二级菜单2-1</a>
        <ul>
          <li>
            <a href="#">三级菜单2-1-1</a>
          </li>
          <li>
            <a href="#">三级菜单2-1-2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">二级菜单2-2</a>
        <ul>
          <li>
            <a href="#">三级菜单2-2-1</a>
          </li>
          <li>
            <a href="#">三级菜单2-2-2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

此处仅展示了一个简单的三级菜单，实际应用中可以根据需要定义更深层次的菜单。

2. CSS样式

接下来，需要定义CSS样式来控制菜单的显示与隐藏。通过控制菜单的高度、设置overflow属性为hidden，可以达到“折叠”菜单的效果。

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  position: relative;
}

#menu ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  height: 0;
  overflow: hidden;
}

#menu li:hover ul {
  height: auto;
}

此处所展示的样式仅控制了菜单的基本显示与隐藏效果，实际应用中可以根据需要增加更多样式进行美化。

3. JavaScript逻辑

最后，需要定义JavaScript逻辑来控制菜单的展开与收缩。通过为菜单添加事件监听器，在用户鼠标移入/移出时设置相应的类，从而控制菜单的显示与隐藏。

var menu = document.getElementById("menu");

function setupMenu() {
  var lis = menu.getElementsByTagName("li");
  for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    var ul = li.getElementsByTagName("ul")[0];
    if (ul) {
      li.className += " has-children";
      ul.className += " hidden";
      li.onmouseover = function() {
        this.className += " hover";
        var ul = this.getElementsByTagName("ul")[0];
        if (ul) {
          ul.className = ul.className.replace("hidden", "");
        }
      };
      li.onmouseout = function() {
        this.className = this.className.replace("hover", "");
        var ul = this.getElementsByTagName("ul")[0];
        if (ul) {
          ul.className += " hidden";
        }
      };
    }
  }
}

setupMenu();

此处所展示的JavaScript逻辑控制了菜单的基本交互效果，实际应用中可以根据需要增加更多细节的处理。

示例说明

下面提供两条示例说明，以帮助读者更加深入理解这种实现方法。

示例一

在绑定事件时，可以使用事件委托的方式，将事件绑定到菜单的上级元素上，从而避免每个菜单项都需要绑定事件监听器的问题。示例代码如下：

var menu = document.getElementById("menu");

function setupMenu() {
  menu.onmouseover = function(event) {
    var target = event.target || event.srcElement;
    var li = target.closest("li");
    if (li) {
      var ul = li.getElementsByTagName("ul")[0];
      if (ul) {
        ul.className = ul.className.replace("hidden", "");
      }
    }
  };
  menu.onmouseout = function(event) {
    var target = event.target || event.srcElement;
    var li = target.closest("li");
    if (li) {
      var ul = li.getElementsByTagName("ul")[0];
      if (ul) {
        ul.className += " hidden";
      }
    }
  };
}

setupMenu();

此处所展示的代码使用了closest方法来查找最近的父级li元素，从而将事件绑定到“一级菜单”上，避免了“二级菜单”和“三级菜单”都需要绑定事件监听器的问题。

示例二

为了提高用户体验，我们可以通过CSS3动画来实现菜单的展开与收缩效果。示例代码如下：

#menu li ul {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

#menu li.hover > ul {
  height: auto;
}

此处所展示的代码为菜单的展开和收缩增加了0.3s的渐入渐出动画效果，在菜单整体布局较为简单的情况下可以大大提高用户体验。