当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript与CSS实现下拉菜单教程

JavaScript与CSS实现下拉菜单教程

2025-10-01 09:54:33 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript与CSS实现可开关下拉菜单详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

JavaScript与CSS实现可开关下拉菜单：深入理解样式获取与事件处理

本文详细探讨了使用JavaScript和CSS实现可开关下拉菜单的常见挑战，特别是如何正确获取元素的计算样式以及如何有效管理事件冒泡。通过引入window.getComputedStyle解决样式判断不准确的问题，并利用e.stopImmediatePropagation()来阻止事件冒泡，我们构建了一个功能完善、响应用户点击行为的下拉菜单，并提供了完整的代码示例和最佳实践。

1. 理解JavaScript中样式获取的局限性

在Web开发中，我们经常需要根据元素的当前样式状态来执行不同的JavaScript逻辑。一个常见的误区是直接使用 element.style.property 来获取通过CSS类或外部样式表设置的样式。

例如，当我们有一个下拉菜单 (#dropdown) 默认设置为 display: none;，并通过添加一个 .block 类来将其显示为 display: block !important; 时，尝试使用 dropdown.style.display 来判断其当前显示状态往往会失败。这是因为 element.style.property 只会返回在元素 style 属性中直接设置的行内样式。如果样式是通过CSS规则（如类选择器、ID选择器等）应用的，element.style.property 将返回空字符串，而不是实际的计算值。

错误示例：

// 假设 #dropdown 的 display 样式是通过 CSS 类 .block 设置的
if (dropdown.style.display === "block") {
    // 这段代码可能永远不会执行，因为 dropdown.style.display 可能是空字符串
    console.log("下拉菜单已显示");
}

2. 正确获取元素的计算样式：window.getComputedStyle()

为了解决上述问题，我们需要使用 window.getComputedStyle() 方法。这个方法返回一个 CSSStyleDeclaration 对象，其中包含了元素所有最终计算后的样式。

正确获取样式：

const style = window.getComputedStyle(dropdown);
if (style.display === "block") {
    console.log("下拉菜单已显示");
}

通过 window.getComputedStyle(element).property，我们可以准确地获取到元素在浏览器中实际渲染的样式值，无论这些样式是通过行内样式、内部样式表还是外部样式表应用的。

3. 事件处理与冒泡机制

实现可开关下拉菜单的另一个关键点是正确处理用户点击事件，特别是如何让下拉菜单在点击菜单按钮时显示，在点击页面其他区域时隐藏。这涉及到事件监听、事件对象以及事件冒泡机制。

3.1 监听菜单点击事件

首先，我们需要为菜单按钮 (#menu) 添加一个点击事件监听器，用于显示下拉菜单。

3.2 监听文档点击事件以隐藏菜单

为了在点击菜单外部时隐藏下拉菜单，我们通常会给 document.body 或 document 添加一个全局的点击事件监听器。

3.3 理解事件冒泡与 e.stopImmediatePropagation()

当一个元素上发生事件时，例如点击事件，该事件会首先在目标元素上触发，然后沿着DOM树向上冒泡，依次触发其父元素、祖父元素直到 document 或 window 上的相同类型事件监听器。

在下拉菜单场景中，如果我们点击了菜单按钮 (#menu)，这个点击事件会触发 #menu 上的监听器，使下拉菜单显示。但由于事件冒泡，这个点击事件会继续向上冒泡到 document.body。如果 document.body 上也注册了一个隐藏下拉菜单的监听器，那么菜单刚显示就会立即被隐藏。

为了防止这种“立即隐藏”的问题，我们需要在显示下拉菜单的事件处理函数中，使用 e.stopImmediatePropagation() 方法。这个方法会阻止当前事件在当前元素上以及后续冒泡阶段中所有其他相同类型事件监听器的执行。

注意：

e.stopPropagation() 阻止事件向上冒泡，但当前元素上其他相同类型的事件监听器仍然会执行。
e.stopImmediatePropagation() 不仅阻止事件冒泡，还会阻止当前元素上所有其他相同类型的事件监听器执行。在我们的场景中，使用 stopImmediatePropagation() 是更稳妥的选择，确保点击菜单时不会触发任何可能干扰显示操作的其他点击事件。

4. 完整实现代码示例

以下是根据上述原理构建的可开关下拉菜单的完整HTML、CSS和JavaScript代码：

HTML 结构 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可开关下拉菜单</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="vh">
    <div class="navs" id="menu">
        <p>MENU</p>
        <ul id="dropdown">
            <li><a href="index.html">HOME</a></li>
            <li><a href="blog.html">BLOG</a></li>
            <li><a href="books.html">BOOKS</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式 (style.css)

.vh {
  height: 100vh; /* 确保 body 有足够高度，方便点击非菜单区域 */
  margin: 0;
  font-family: sans-serif;
}

.navs {
  border: 2px solid green; /* 菜单区域边框，方便调试 */
  display: inline-block; /* 使菜单P标签和UL在同一行，并限制宽度 */
  position: relative; /* 为下拉菜单定位提供上下文 */
}

#dropdown {
    display: none; /* 默认隐藏 */
    border: 1px solid red; /* 下拉菜单边框，方便调试 */
    background: rgb(29, 18, 80);
    color: white;
    width: 120px; /* 固定宽度，或使用vw */
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0;
    position: absolute; /* 绝对定位 */
    top: 100%; /* 位于菜单下方 */
    left: 0;
    z-index: 1000; /* 确保在其他内容之上 */
}

#dropdown li a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    display: block;
}

#dropdown li a:hover {
    background: rgb(40, 30, 90);
}

/* 用于通过 JavaScript 切换显示/隐藏的类 */
.block {
    display: block !important; /* 使用 !important 确保覆盖其他样式 */
}

JavaScript 逻辑 (script.js)

const menu = document.getElementById("menu");
const dropdown = document.getElementById("dropdown");

/**
 * 显示下拉菜单的函数。
 * @param {Event} e - 点击事件对象。
 */
const showDropdown = (e) => {
    const style = window.getComputedStyle(dropdown);
    console.log("当前下拉菜单状态 (点击菜单前):", style.display);

    // 如果下拉菜单当前是隐藏的，则显示它
    if (style.display !== "block") {
        dropdown.classList.add("block");
        console.log("下拉菜单已显示");
        // 阻止事件冒泡，防止立即触发 body 的点击事件而隐藏菜单
        e.stopImmediatePropagation();
    } else {
        // 如果菜单已经显示，则再次点击菜单时隐藏它 (实现切换功能)
        dropdown.classList.remove("block");
        console.log("下拉菜单已隐藏 (点击菜单)");
        e.stopImmediatePropagation(); // 同样阻止冒泡，避免body事件干扰
    }
};

/**
 * 隐藏下拉菜单的函数。
 * @param {Event} e - 点击事件对象。
 */
const hideDropdown = (e) => {
    const style = window.getComputedStyle(dropdown);
    // 如果下拉菜单当前是显示的，则隐藏它
    if (style.display === "block") {
        dropdown.classList.remove("block");
        console.log("下拉菜单已隐藏 (点击页面其他区域)");
    }
};

// 为菜单按钮添加点击事件监听器
menu.addEventListener('click', showDropdown);

// 为文档主体添加点击事件监听器，用于点击菜单外部时隐藏菜单
document.body.addEventListener('click', hideDropdown);

5. 代码解析与注意事项

DOM 元素获取： document.getElementById() 用于获取 menu 和 dropdown 元素。
showDropdown 函数：
- 通过 window.getComputedStyle(dropdown).display 获取下拉菜单的当前实际显示状态。
- if (style.display !== "block") 判断菜单是否隐藏，如果隐藏则添加 .block 类显示。
- else 分支实现了再次点击菜单时隐藏下拉菜单的切换功能。
- 关键点： e.stopImmediatePropagation() 在显示或隐藏菜单后被调用，确保点击菜单区域的事件不会继续冒泡到 document.body，从而避免 hideDropdown 函数被立即触发。
hideDropdown 函数：
- 同样使用 window.getComputedStyle(dropdown).display 判断菜单是否显示。
- 如果菜单是显示的，则移除 .block 类隐藏它。
- 这个函数作为 document.body 的点击事件监听器，负责处理点击菜单外部区域时隐藏菜单的逻辑。
事件监听器：
- menu.addEventListener('click', showDropdown);：当点击 menu 元素时，执行 showDropdown 函数。
- document.body.addEventListener('click', hideDropdown);：当点击 body 元素（即页面任何非 menu 区域）时，执行 hideDropdown 函数。
CSS !important： 在 .block 类中使用 display: block !important; 是为了确保这个类能够覆盖 #dropdown 默认的 display: none; 样式，即使 #dropdown 具有更高的特异性。
调试技巧： 教程中使用了 console.log() 来输出下拉菜单的状态和事件触发情况，这比 alert() 更适合调试，因为它不会阻塞页面的执行流程。