js实现具有高亮显示效果的多级菜单代码

实现具有高亮显示效果的多级菜单代码需要以下步骤：

1.准备HTML结构

首先，需要准备一个基本的HTML结构。我们可以使用无序列表（ul）和有序列表（ol）来构建多级菜单。例如，下面是一个三级菜单结构：

<ul>
  <li><a href="#">一级菜单</a>
    <ul>
      <li><a href="#">二级菜单</a>
        <ul>
          <li><a href="#">三级菜单</a></li>
          <li><a href="#">三级菜单</a></li>
          <li><a href="#">三级菜单</a></li>
        </ul>
      </li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
    </ul>
  </li>
  <li><a href="#">一级菜单</a></li>
  <li><a href="#">一级菜单</a></li>
</ul>

2.使用CSS样式美化菜单

接下来，使用CSS样式对菜单进行美化。为了实现高亮显示效果，需要添加一个.hover类，用来表示鼠标移动到某个菜单项时的样式。同时，还要设置子菜单的样式，使其可以垂直显示。例如：

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

li {
  position: relative;
}

a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  background-color: #f9f9f9;
  display: none;
}

li:hover > ul {
  display: block;
}

.hover {
  background-color: #c9c9c9;
}

.hover a {
  color: #fff;
}

3.使用JavaScript代码添加事件监听器

最后，需要使用JavaScript代码来添加事件监听器，实现点击菜单项时的高亮显示效果。可以使用事件委托技术，将事件监听器绑定在祖先元素上。当用户点击菜单项时，JavaScript代码会查找到该菜单项的祖先元素，并添加.hover类。同时，还要将同级菜单项的.hover类移除，保证每次只有一个菜单项被高亮显示。例如：

var menu = document.querySelector('ul');

menu.addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName === 'A') {
    event.preventDefault();
    var li = target.parentNode;
    var siblings = li.parentNode.children;
    for (var i = 0; i < siblings.length; i++) {
      var sibling = siblings[i];
      if (sibling !== li) {
        sibling.classList.remove('hover');
      }
    }
    li.classList.add('hover');
  }
});

这样就实现了一个具有高亮显示效果的多级菜单代码。下面分别给出两个示例说明。

示例一：基本菜单

以下是一个基本的两级菜单，当用户点击菜单项时，会高亮显示当前菜单项，同时去除同级菜单项的高亮。

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a>
    <ul>
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
      <li><a href="#">产品3</a></li>
    </ul>
  </li>
  <li><a href="#">关于我们</a></li>
</ul>

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

li {
  position: relative;
}

a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  background-color: #f9f9f9;
  display: none;
}

li:hover > ul {
  display: block;
}

.hover {
  background-color: #c9c9c9;
}

.hover a {
  color: #fff;
}

var menu = document.querySelector('ul');

menu.addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName === 'A') {
    event.preventDefault();
    var li = target.parentNode;
    var siblings = li.parentNode.children;
    for (var i = 0; i < siblings.length; i++) {
      var sibling = siblings[i];
      if (sibling !== li) {
        sibling.classList.remove('hover');
      }
    }
    li.classList.add('hover');
  }
});

示例二：三级菜单

以下是一个三级菜单，当用户点击菜单项时，会高亮显示当前菜单项，同时去除同级菜单项的高亮，并且展开下一级菜单。

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a>
    <ul>
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
      <li><a href="#">产品3</a>
        <ul>
          <li><a href="#">产品3.1</a></li>
          <li><a href="#">产品3.2</a></li>
          <li><a href="#">产品3.3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">关于我们</a></li>
</ul>

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

li {
  position: relative;
}

a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  background-color: #f9f9f9;
  display: none;
}

li:hover > ul {
  display: block;
}

.hover {
  background-color: #c9c9c9;
}

.hover a {
  color: #fff;
}

var menu = document.querySelector('ul');

menu.addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName === 'A') {
    event.preventDefault();
    var li = target.parentNode;
    var siblings = li.parentNode.children;
    for (var i = 0; i < siblings.length; i++) {
      var sibling = siblings[i];
      if (sibling !== li) {
        sibling.classList.remove('hover');
      }
    }
    li.classList.add('hover');
  }
});

以上就是实现具有高亮显示效果的多级菜单代码的完整攻略。