点击子元素时Dropdown异常隐藏问题及功能实现求助

问题分析 #

点击下拉菜单内的输入框等元素时，菜单意外收起，核心原因有两个：

1. 事件冒泡：下拉菜单是.nav__panel-user的子元素，点击内部元素时事件会向上冒泡到父元素，触发绑定的openLogin函数执行显示/隐藏切换，导致菜单关闭。
2. 状态判断逻辑缺陷：直接通过element.style.display判断状态不可靠——初始的display:none是通过CSS设置的，此时element.style.display为空字符串，虽然第一次点击能正常触发，但后续状态判断可能出现异常。

解决方案 #

方案1：缩小事件触发范围+用CSS类控制状态（推荐）

将点击触发逻辑绑定到具体的用户图标按钮，而非整个父容器，同时用CSS类替代直接操作style.display，让状态管理更稳定。

修改后的HTML

<div class="nav__panel-user">
    <!-- 把onclick移到触发按钮上 -->
    <div class="nav__block-user" onclick="openLogin()">
        <a class="nav__user-bottom">
            <i class="fa-regular fa-user" style="font-size: 20px; "></i>
        </a>
    </div>
    <div class="navUser__dropdown-user">
        <div class="dropdown__user-account">
            <form class="dropdown__user-account--form">
                <div class="user__account-form--title">
                    Đăng nhập
                </div>
                <div class="user__account-form--group">
                    <input type="text" class="account__form-user--input" placeholder="Tài khoản" />
                </div>
                <div class="user__account-form--group">
                    <input type="text" class="account__form-user--input" placeholder="Mật khẩu" />
                </div>
                <div class="user__account-form--group_btn">
                    <button class="account-menu__form-button">
                        Đăng nhập
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

修改后的CSS

.navUser__dropdown-user {
  display: none;
  position: absolute;
  max-height: 559px;
  background: var(--white);
  color: #3d464d;
  width: 280px;
  right: 15px;
  z-index: 100;
}
/* 添加显示状态类 */
.navUser__dropdown-user.show {
  display: block;
}

修改后的JavaScript

function openLogin() {
  const navUserDropdown = document.querySelector(".navUser__dropdown-user");
  navUserDropdown.classList.toggle("show");
}

window.onclick = function (event) {
  // 点击区域既不在触发按钮内，也不在下拉菜单内时，关闭菜单
  if (!event.target.closest(".nav__block-user") && !event.target.closest(".navUser__dropdown-user")) {
    const dropdowns = document.getElementsByClassName("navUser__dropdown-user");
    for (let i = 0; i < dropdowns.length; i++) {
      dropdowns[i].classList.remove("show");
    }
  }
};

方案2：阻止下拉区域的事件冒泡（兼容原有绑定结构）

如果不想修改onclick的绑定位置，可直接给下拉菜单添加事件冒泡阻止，避免点击内部元素时触发父容器的切换逻辑：

修改后的HTML

<div class="nav__panel-user" onclick="openLogin()">
    <div class="nav__block-user">
        <a class="nav__user-bottom">
            <i class="fa-regular fa-user" style="font-size: 20px; "></i>
        </a>
    </div>
    <!-- 添加onclick阻止冒泡 -->
    <div class="navUser__dropdown-user" onclick="event.stopPropagation()">
        <!-- 原有表单内容不变 -->
    </div>
</div>

优化后的JavaScript（配合CSS类控制）

function openLogin() {
  const navUserDropdown = document.querySelector(".navUser__dropdown-user");
  navUserDropdown.classList.toggle("show");
}

window.onclick = function (event) {
  if (!event.target.closest(".nav__panel-user")) {
    const dropdowns = document.getElementsByClassName("navUser__dropdown-user");
    for (let i = 0; i < dropdowns.length; i++) {
      dropdowns[i].classList.remove("show");
    }
  }
};

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