如何通过含CSS值条件的if语句实现下拉菜单隐藏？代码异常求助

问题原因分析 #

1. 全局点击无响应：你写的if语句仅在页面初始化时执行一次，并未绑定到文档点击事件上，自然无法触发下拉框隐藏逻辑；同时你也没有给document添加点击事件监听。
2. 样式状态检测失效：dropdown.style.display只能读取内联样式（直接通过element.style设置的样式），无法获取通过CSS类（如.block）设置的样式值。要判断元素实际显示状态，要么用getComputedStyle读取计算后样式，要么直接检查类的存在性。

修正后的完整代码 #

HTML（无需修改）

<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>

CSS（无需修改）

.block {
    display: block !important;
}

#dropdown {
    display: none;
    border: 1px solid black;
    background: rgb(29, 18, 80);
    width: 6vw;
    list-style: none;
    text-align: left;
}

JavaScript（核心修改）

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

const getIt = (e) => {
    // 阻止事件冒泡，避免点击菜单时直接触发全局隐藏逻辑
    e.stopPropagation();
    dropdown.classList.add("block");
};

const dontGetIt = () => {
    dropdown.classList.remove("block");
};

menu.onclick = getIt;

// 监听文档全局点击，点击菜单外区域隐藏下拉框
document.addEventListener("click", (e) => {
    // 判断点击目标是否在菜单或下拉框内部，不在则隐藏
    if (!dropdown.contains(e.target) && !menu.contains(e.target)) {
        dontGetIt();
    }
});

关键修改说明 #

• 给菜单点击事件添加e.stopPropagation()：阻止事件向上冒泡到document，避免刚显示下拉框就被全局点击事件隐藏。
• 绑定document点击事件：通过contains方法判断点击范围，仅在点击菜单和下拉框外部时才执行隐藏逻辑。
• 移除无效的初始化if判断：原代码中的判断仅在页面加载时执行一次，无实际交互作用，直接删除即可。

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