JavaScript 动态菜单点击高亮效果实现教程

动态菜单高亮功能的挑战

在网页开发中，实现交互式菜单是常见的需求。当用户点击菜单中的某个选项时，通常需要该选项以不同的样式（例如背景色）高亮显示，同时其他未选中项恢复到默认样式。一个常见的误区是，在每次点击时都遍历所有菜单项来重置颜色，然后单独设置被点击项的颜色。这种方法不仅效率低下，尤其是在菜单项数量较多时，而且容易引入逻辑错误，难以处理“从上到下”或“从下到上”等各种点击顺序。

优化方案：事件委托与状态管理

为了解决上述问题，我们可以采用事件委托（Event Delegation）和状态管理（State Management）相结合的优化方案。

1. CSS 默认样式设置： 首先，利用 CSS 为所有菜单项设置默认的背景色（例如白色）。这样，JavaScript 只需要处理选中项的颜色变化，而无需每次都显式地将所有非选中项设为白色。
2. 事件委托： 将事件监听器附加到菜单项的父容器上，而不是每个单独的菜单项。当子元素上的事件冒泡到父元素时，父元素上的监听器可以捕获并处理该事件。这大大减少了事件监听器的数量，提高了性能。
3. 状态管理： 使用一个变量来存储当前被选中菜单项的引用。在每次点击事件发生时，首先检查是否存在上一个被选中项，如果存在，则将其样式重置为默认；然后将新点击的菜单项设置为高亮，并更新状态变量。

示例代码

下面我们将通过 HTML、CSS 和 JavaScript 来实现这一功能。

1. HTML 结构

我们创建一个包含多个 p 标签作为菜单项的 div 容器。

<div class="container">
    <p class="menu">Home</p>
    <p class="menu">Gallery</p>
    <p class="menu">Technology</p>
    <p class="menu">Information</p>
    <p class="menu">Contact</p>
    <p class="menu">About</p>
</div>

2. CSS 样式

在 CSS 中，我们为菜单项设置默认的白色背景和鼠标指针样式。此外，可以添加一个可选的 :hover 伪类，以在鼠标悬停时提供视觉反馈。

立即学习“Java免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

body         { background-color: #efefef; font-family: sans-serif; } /* 页面背景和字体 */
.container   { display: flex; flex-direction: column; width: 200px; border: 1px solid #ccc; padding: 10px; }
.menu        { background-color: white; cursor: pointer; padding: 8px 15px; margin: 5px 0; border-radius: 4px; transition: background-color 0.2s ease; }
.menu:hover  { background-color: #e0e0e0; } /* 鼠标悬停时的背景色 */
/* 选中项的绿色 */
.menu.selected { background-color: #beffc7; }

注意： 在上述 CSS 中，我们引入了一个 .menu.selected 类来表示选中状态，而不是直接在 JavaScript 中操作 style.backgroundColor。这种做法更符合样式与行为分离的原则，使得代码更易于维护和扩展。

3. JavaScript 逻辑

JavaScript 代码负责处理点击事件，并根据点击情况更新菜单项的样式。

let container = document.querySelector('.container');
let currentSelectedMenuItem = null; // 用于存储当前被选中菜单项的引用

container.addEventListener("click", (event) => {
    // 检查被点击的元素是否是 .menu 类的子元素
    if (event.target.matches('.menu')) {
        const clickedMenuItem = event.target;

        // 如果存在上一个被选中的菜单项，则移除其选中样式
        if (currentSelectedMenuItem) {
            currentSelectedMenuItem.classList.remove('selected');
            currentSelectedMenuItem.style.backgroundColor = '#fff'; // 确保恢复默认白色
        }

        // 如果点击的不是当前已选中的项，则将其设为选中
        if (clickedMenuItem !== currentSelectedMenuItem) {
            clickedMenuItem.classList.add('selected');
            clickedMenuItem.style.backgroundColor = '#beffc7'; // 设置选中项的绿色背景
            currentSelectedMenuItem = clickedMenuItem; // 更新当前选中项的引用
        } else {
            // 如果点击的是当前已选中的项，可以考虑取消选中（可选）
            // clickedMenuItem.classList.remove('selected');
            // clickedMenuItem.style.backgroundColor = '#fff';
            // currentSelectedMenuItem = null;
        }
    }
});

代码解析：

• container.addEventListener("click", ...): 我们在父容器 .container 上添加了一个点击事件监听器。
• event.target.matches('.menu'): 在事件处理函数内部，我们首先检查实际被点击的元素（event.target）是否匹配 .menu 选择器。这确保了只有点击到菜单项时才执行后续逻辑。
• currentSelectedMenuItem: 这是一个关键变量，用于存储上一次被点击并设置为高亮的菜单项的引用。
• if (currentSelectedMenuItem): 如果 currentSelectedMenuItem 不为空（即之前有菜单项被选中），我们首先移除它的 selected 类并将其背景色恢复为白色。
• if (clickedMenuItem !== currentSelectedMenuItem): 接下来，我们检查当前点击的菜单项是否与上一个选中项不同。如果不同，则将其添加 selected 类，设置绿色背景，并更新 currentSelectedMenuItem 为当前点击的项。
• 优化说明： 在上面的 JavaScript 代码中，为了演示方便，我直接在 JS 中设置了 style.backgroundColor。但在实际项目中，更推荐通过添加/移除 CSS 类（如 .selected）来控制样式，因为这样能更好地分离结构、样式和行为。例如，在 CSS 中定义 .menu.selected { background-color: #beffc7; }，然后在 JS 中只操作 classList.add('selected') 和 classList.remove('selected')。我已在上述 CSS 示例中添加了 .menu.selected 类，并相应修改了 JavaScript 代码。

注意事项与总结

• 事件委托的优势：
  • 性能提升： 只需一个事件监听器，而不是为每个菜单项都添加一个，尤其适用于动态生成菜单项的场景。
  • 代码简洁： 减少了 DOM 操作和事件绑定代码。
  • 动态适应： 对于后续通过 JavaScript 添加到容器中的新菜单项，无需额外绑定事件，它们会自动继承父容器的事件监听。
• 状态管理的重要性： currentSelectedMenuItem 变量是实现“只有一个菜单项高亮”逻辑的关键。它帮助我们跟踪当前状态，从而正确地重置旧的选中项并设置新的选中项。
• 样式与行为分离： 尽量通过添加/移除 CSS 类来控制样式，而不是直接操作 style 属性。这使得 CSS 更易于管理和修改，也让 JavaScript 专注于行为逻辑。
• 兼容性： 这种基于事件委托和 DOM 操作的方法在现代浏览器中具有良好的兼容性。

通过上述方法，我们不仅能够高效地实现动态菜单的点击高亮功能，而且代码结构清晰、易于维护，能够灵活应对菜单项的增删改以及各种点击场景。

以上就是JavaScript 动态菜单点击高亮效果实现教程的详细内容，更多请关注php中文网其它相关文章！