如何在不使用Cookie的情况下实现仿刷新的二级高亮菜单功能？_产品资讯

发布时间:2024-10-03 22:46

阅读量:0

要实现不用Cookie的仿刷新二级高亮菜单，可以使用JavaScript和CSS。以下是一个简单的示例：，，HTML代码：，``

html，，，，，，无Cookie仿刷新二级高亮菜单，，，，，菜单1，，子菜单1-1，子菜单1-2，，，菜单2，，子菜单2-1，子菜单2-2，，，，，，，

`，，CSS代码（styles.css）：，`

css，.menu {， list-style: none;， padding: 0;，}，，.menu-item {， position: relative;，}，，.submenu {， display: none;， position: absolute;， top: 100%;， left: 0;， list-style: none;， padding: 0;，}，，.menu-item:hover .submenu {， display: block;，}，，.submenu-item {， background-color: #f1f1f1;， padding: 5px;， cursor: pointer;，}，，.submenu-item:hover {， background-color: #d1d1d1;，}，

`，，JavaScript代码（scripts.js）：，`

javascript，function highlightMenuItem(menuItem) {， var submenu = menuItem.querySelector('.submenu');， submenu.style.display = 'block';，}，

不用Cookie的仿刷新二级高亮菜单

在不使用Cookie的情况下，实现一个二级菜单的高亮效果，可以通过CSS和JavaScript来实现，这种方法不需要存储用户的状态，因此每次页面刷新后都会恢复到默认状态。

方法步骤

1. HTML结构

我们需要构建基本的HTML结构，包括一级菜单和二级菜单。

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>二级菜单</title>     <link rel="stylesheet" href="styles.css"> </head> <body>     <nav>         <ul id="main-menu">             <li><a href="#sub-menu-1">一级菜单1</a>                 <ul class="sub-menu" id="sub-menu-1">                     <li><a href="#">二级菜单1-1</a></li>                     <li><a href="#">二级菜单1-2</a></li>                 </ul>             </li>             <li><a href="#sub-menu-2">一级菜单2</a>                 <ul class="sub-menu" id="sub-menu-2">                     <li><a href="#">二级菜单2-1</a></li>                     <li><a href="#">二级菜单2-2</a></li>                 </ul>             </li>         </ul>     </nav>     <script src="script.js"></script> </body> </html>

2. CSS样式

我们通过CSS来控制菜单的显示和隐藏以及高亮效果。

 /* styles.css */ body {     font-family: Arial, sans-serif; } nav ul {     list-style: none;     padding: 0;     margin: 0; } nav li {     position: relative; /* 为了子菜单的绝对定位 */ } .sub-menu {     display: none; /* 默认隐藏子菜单 */     position: absolute;     top: 100%; /* 子菜单位于父菜单下方 */     left: 0;     background-color: #f9f9f9;     min-width: 200px;     box-shadow: 0 8px 16px rgba(0,0,0,0.2); } nav li:hover > .sub-menu {     display: block; /* 鼠标悬停时显示子菜单 */ } nav a {     display: block;     padding: 10px;     text-decoration: none;     color: black; } nav a:hover {     background-color: #f1f1f1; /* 鼠标悬停时改变背景颜色 */ }

3. JavaScript交互

虽然我们没有使用Cookie来保持状态，但可以通过JavaScript添加一些简单的交互效果，比如点击一级菜单项时展开对应的二级菜单。

 // script.js document.querySelectorAll('#main-menu > li > a').forEach(function(item) {     item.addEventListener('click', function(event) {         event.preventDefault(); // 阻止默认行为，避免页面跳转         const subMenu = this.nextElementSibling;         if (subMenu) {             if (subMenu.style.display === 'block') {                 subMenu.style.display = 'none'; // 点击时关闭已经展开的子菜单             } else {                 var expandedSubMenu = document.querySelector('.sub-menu.show');                 if (expandedSubMenu) {                     expandedSubMenu.classList.remove('show'); // 如果有其他展开的子菜单，先关闭它                 }                 subMenu.style.display = 'block'; // 展开当前点击的子菜单             }         }     }); });