如何实现点击页面任意处隐藏下拉菜单并添加开合动画（JavaScript）

核心问题梳理 #

当前代码存在两个关键问题：

1. 点击页面外部关闭下拉的逻辑错误，event.stopPropagation的写法不符合规范，未正确绑定全局点击事件
2. 使用display: none/block无法实现过渡动画，该属性不支持CSS过渡效果

修正后的完整代码 #

1. JavaScript 代码（./assets/js/Dropdown.js） #

function Dropdown(event) {
    // 阻止事件冒泡，避免触发全局关闭逻辑
    event.stopPropagation();
    const dropdown = document.getElementById("myDropdown");
    dropdown.classList.toggle("show");
}

// 全局点击监听：点击页面任意区域关闭下拉
document.addEventListener("click", function() {
    const dropdowns = document.getElementsByClassName("dropdown-content");
    for (let i = 0; i < dropdowns.length; i++) {
        const openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
        }
    }
});

// 点击下拉菜单内部时阻止冒泡，避免关闭
document.getElementById("myDropdown").addEventListener("click", function(event) {
    event.stopPropagation();
});

2. HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/NavBar.css">
    <link rel="stylesheet" href="./assets/css/Dropdown.css">
    <link rel="shortcut icon" href="./images/favicon.ico" />
    <script src="https://kit.fontawesome.com/7615d16710.js" crossorigin="anonymous"></script>
    <title>MusmanDev</title>
</head>
<body>
    <header>
        <a class="logo" href="#"><img class="logo" src="./images/logo.png" alt="MusmanDev"></a>
        <nav>
            <ul class="nav__links">
                <li><a href="#">Blogs</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Courses</a></li>
                <li><a>|</a></li>
                <li>
                    <div class="dropdown">
                        <!-- 合并重复的class属性，传递event参数 -->
                        <i class="fa-solid fa-bolt fa-lg dropbtn" onclick="Dropdown(event)"></i>
                        <div id="myDropdown" class="dropdown-content">
                          <a><i class="fa-solid fa-moon"></i>  Dark Mode</a>
                          <a><i class="fa-solid fa-sun"></i>  Light Mode</a>
                          <a><i class="fa-solid fa-display"></i>  System</a>
                        </div>
                    </div>
                </li>
                <li><a href="#"><i class="fa-brands fa-github-square fa-xl"></i>‎</a></li>
            </ul>
        </nav>
    </header>
    <!-- 将脚本移至body末尾，确保DOM加载完成后执行 -->
    <script src="./assets/js/Dropdown.js"></script>
</body>
</html>

3. CSS 代码（./assets/css/Dropdown.css） #

.dropbtn {
    background-color: #24252A;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    /* 用opacity和max-height替代display，实现动画基础 */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: pointer;
    /* 添加过渡动画 */
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
  
.dropdown-content a:hover {
    background-color: #ddd;
}

/* 下拉菜单显示状态 */
.show {
    opacity: 1;
    max-height: 200px; /* 设置足够容纳所有选项的高度 */
}

关键修改说明 #

• 点击外部关闭逻辑：给document绑定全局点击事件，点击按钮时阻止事件冒泡避免误触发关闭；同时给下拉菜单内部添加事件阻止冒泡，确保点击菜单选项时不会关闭。
• 动画实现：放弃display属性，改用opacity控制透明度、max-height控制高度，配合transition属性实现平滑的展开/关闭动画。
• HTML修正：合并了<i>标签的重复class属性，将脚本移到body末尾确保DOM加载完成，调用Dropdown函数时传递event参数。

内容的提问来源于stack exchange，提问作者user18065854