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');
  }
});

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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现具有高亮显示效果的多级菜单代码 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 轻松理解Javascript变量的相关问题

    轻松理解JavaScript变量的相关问题 JavaScript中的变量是用来存储数据的。但是在JavaScript中,变量有很多相关的问题,这些问题可能会困扰初学者。在本文中,我将详细讲解以下问题: JavaScript中的变量类型有哪些? 如何声明和赋值变量? JavaScript中的作用域是什么? 变量的生命周期是什么? 如何避免变量名冲突? 变量类型…

    JavaScript 2023年5月19日
    00
  • 2019年前端必用js正则(小结)

    2019年前端必用js正则(小结) 正则表达式是一种字符串匹配的工具,可以在前端开发中处理文本、验证输入、搜索替换等各种问题。下面是一些前端开发中可能会用到的JavaScript正则表达式。 常用的正则表达式 邮箱格式验证 const emailReg = /^([a-zA-Z0-9._-]+)@([a-zA-Z0-9_-]+)\.([a-zA-Z]{2,6…

    JavaScript 2023年6月10日
    00
  • javascript合并两个数组最简单的实现方法

    针对这个问题,我将提供以下完整攻略: JavaScript合并两个数组最简单的实现方法 在JavaScript中合并两个数组的方法有很多,但这里我们将要学习最简单的两种方法。它们都是原生JavaScript方法,不依赖于外部库。 方法一:concat()方法 concat()方法通过将两个数组组合在一起来创建一个新数组。数组的元素将首先是第一个数组中的元素,…

    JavaScript 2023年5月27日
    00
  • JavaScript 面向对象基础简单示例

    首先,我们需要了解JavaScript中的面向对象编程思想,以及使用它的基础语法。JavaScript中的面向对象编程依赖于对象、属性和方法的概念,而不是严格的类和实例化。 创建对象 在JavaScript中,可以使用对象字面量的方式创建对象,也可以通过构造函数方式创建对象。对象字面量是一种简单的创建对象的方式,它使用大括号括起来的属性和值的列表来定义一个对…

    JavaScript 2023年5月27日
    00
  • 介绍JavaScript中Math.abs()方法的使用

    介绍JavaScript中Math.abs()方法的使用的攻略如下: 1. Math.abs()方法的概述 Math.abs()是JavaScript内置的数学函数,用于返回一个数的绝对值。接受一个参数,返回该参数的绝对值(也就是该参数的正数)。如果参数不是数值类型,则该方法会尝试将其转换为数值类型。 2. Math.abs()方法的语法 Math.abs(…

    JavaScript 2023年5月28日
    00
  • 浅析js中substring和substr的方法

    浅析JS中substring和substr的方法 在JavaScript中, substring 和 substr 是两个常用的字符串方法,用于截取字符串的一部分并返回。但是它们的不同之处在于它们的使用方式和截取字符串的方式。下面我们来浅析一下它们的使用方法及区别。 一、substring方法 1.1 方法定义 substring(startIndex, e…

    JavaScript 2023年6月10日
    00
  • JS函数的定义与调用方法推荐

    我们来详细讲解一下“JS函数的定义与调用方法推荐”的完整攻略。 定义函数 定义一个函数可以用如下的语法: function functionName(parameter1, parameter2, … , parameterN) { // 函数体 } 其中 functionName 是函数名称,parameter1 到 parameterN 是函数的形参…

    JavaScript 2023年5月27日
    00
  • javascript日期操作详解(脚本之家整理)

    我来给您提供详细讲解“JavaScript日期操作详解(脚本之家整理)”的完整攻略。 JavaScript日期对象 JavaScript内置了Date对象来处理日期和时间。可以使用Date对象创建一个日期对象,日期对象表示一个特定的时刻。 创建日期对象 可以使用构造函数创建一个日期对象: var date1 = new Date(); 可以使用一个整数值表示…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部