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

要实现不用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的情况下实现仿刷新的二级高亮菜单功能？

在不使用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样式

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

我们通过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'; // 展开当前点击的子菜单
            }
        }
    });
});