PHP动态加载HTML时JS下拉菜单Toggle功能失效问题

问题背景 #

我用JS给HTML里的div切换.show类（控制display:none/block）做下拉菜单，同时用PHP根据用户登录状态加载两种导航栏。调试时发现JS确实给元素加上了.show类，但界面没生效，排查后发现是点击外部关闭下拉的逻辑写错了——原来代码里的|| (!event.target.matches(".logged-in"))导致下拉刚触发就被关掉，删掉这部分功能恢复，但需要正确修改这个逻辑，不能直接移除。

问题分析 #

原来的判断逻辑错误地把点击.logged-in元素（登录状态触发按钮）也归为“外部点击”，导致点击触发下拉时，刚加上.show类就立刻被关闭逻辑移除，所以界面看不到变化。而且matches()只能判断元素本身，没法处理点击按钮内部子元素的情况，逻辑本身就有漏洞。

修正后的代码 #

PHP/HTML 部分（必须在文件顶部加session_start();）

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
    <style>
        .dropdown-menu {
            display: none;
            position: absolute;
            background: #fff;
            border: 1px solid #eee;
            padding: 10px;
        }
        .dropdown-menu.show {
            display: block;
        }
        .logged-in {
            cursor: pointer;
            padding: 10px;
        }
    </style>
</head>
<body>
    <?php if(isset($_SESSION['user_id'])): ?>
        <!-- 登录状态导航 -->
        <div class="logged-in">
            <span>我的账户</span>
            <div class="dropdown-menu">
                <a href="/profile">个人中心</a>
                <a href="/logout">退出登录</a>
            </div>
        </div>
    <?php else: ?>
        <!-- 未登录状态导航 -->
        <div class="guest-nav">
            <a href="/login">登录</a>
            <a href="/register">注册</a>
        </div>
    <?php endif; ?>
</body>
</html>

JS 部分

document.addEventListener('DOMContentLoaded', function() {
    const loggedInBtn = document.querySelector('.logged-in');
    const dropdownMenu = document.querySelector('.dropdown-menu');

    if (loggedInBtn && dropdownMenu) {
        // 点击登录按钮切换下拉
        loggedInBtn.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡，避免触发外部关闭逻辑
            dropdownMenu.classList.toggle('show');
        });

        // 点击外部关闭下拉
        document.addEventListener('click', function(event) {
            // 修正逻辑：点击目标不属于登录按钮，也不属于下拉菜单，才关闭
            const isInBtn = loggedInBtn.contains(event.target);
            const isInMenu = dropdownMenu.contains(event.target);
            if (!isInBtn && !isInMenu) {
                dropdownMenu.classList.remove('show');
            }
        });
    }
});

关键修正点 #

1. 给登录按钮的点击事件加了e.stopPropagation()，避免点击按钮时事件冒泡到document，导致刚打开下拉就被关闭。
2. 用contains()替代matches()判断点击范围：contains()能检测点击目标是否是元素本身或其子元素，完美覆盖点击按钮内部文字、图标等场景，解决了原逻辑的漏洞。

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