如何使用querySelector和addEventListener实现点击切换div显示与隐藏

你的代码存在几个核心问题，导致无法实现预期的显示/隐藏效果，下面是修正方案：

原代码的问题 #

• 触发元素选错：你把点击事件绑定在了隐藏的表单上，但表单初始是display: none状态，根本无法被点击触发。应该把事件绑在可见的<a href="#">Login</a>链接上
• 语法错误：block是字符串值，必须用引号包裹，否则会被当作未定义变量处理
• 缺少切换逻辑：当前代码只能实现表单显示，无法完成点击切换隐藏的交互

修正后的完整代码 #

首先确保给表单加上初始隐藏的CSS：

#dropdownlogin {
    display: none;
}

然后修改HTML和JS逻辑：

<div class="login">
    <a href="#" id="loginTrigger">Login</a>
    <center>
        <form id="dropdownlogin" action="">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                <label for="floatingInput">Email address</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">Password</label>
            </div>
            <div id="loginbtn">
                <button>Login</button>
                <button>Forgot Password</button>
            </div>
        </form>
    </center>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取触发按钮和目标表单
    const loginTrigger = document.querySelector("#loginTrigger");
    const loginForm = document.querySelector("#dropdownlogin");

    loginTrigger.addEventListener('click', function(e) {
        // 阻止a标签默认的锚点跳转行为
        e.preventDefault();
        
        // 切换表单的显示状态
        if (loginForm.style.display === 'none' || loginForm.style.display === '') {
            loginForm.style.display = 'block';
        } else {
            loginForm.style.display = 'none';
        }
    });
});
</script>

关键说明 #

• 给触发用的<a>标签添加了id="loginTrigger"，方便通过querySelector精准获取元素
• 使用e.preventDefault()阻止a标签默认的跳转行为，避免页面滚动到顶部
• 通过判断表单当前的display值，实现显示/隐藏的双向切换：如果当前是隐藏状态（或未设置内联样式）则显示，反之隐藏

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