HTML个人资料下拉菜单切换脚本失效问题咨询

问题说明 #

用HTML/CSS实现了带下拉菜单的个人资料组件，通过JavaScript的classList.toggle()切换open-menu类来控制菜单展开收起，但功能无法正常工作。已设置.profile-menu-wrap的max-height: 0隐藏菜单，期望添加open-menu类后将max-height改为400px实现展开，但没有效果。

核心问题 #

CSS选择器写法错误：.profile-menu-wrap .open-menu是后代选择器，它会匹配.profile-menu-wrap内部带有open-menu类的子元素，而非同时拥有.profile-menu-wrap和open-menu类的元素本身。

修复步骤 #

1. 修改CSS选择器 #

将原后代选择器改为类连写选择器，确保选中添加了open-menu类的.profile-menu-wrap元素：

/* 替换原来的错误选择器 */
.profile-menu-wrap.open-menu {
  max-height: 400px;
}

2. 完整修复后代码 #

HTML代码

<div class="navbar-right">
  <div class="online">
    <img src="https://via.placeholder.com/150?text=toggle-menu" class="nav-profile-img" onclick="toggleMenu()">
  </div>
</div>

<!-- ----------------------------profile-dropdown----------------------------------- -->

<div class="profile-menu-wrap" id="profileMenu">
  <div class="profile-menu">
    <div class="user-info">
      <img src="https://via.placeholder.com/50?text=profile">
      <div>
        <h3>James Sheldon</h3>
        <p>Full-stack Developer at Bizwy</p>
        <a href="#">View Profile</a>
      </div>
    </div>
    <hr>
    <a href="#" class="profile-menu-link">
      <img src="https://via.placeholder.com/50?text=feedback">
      <p>Give Feedback</p>
      <span>>></span>
    </a>
    <a href="#" class="profile-menu-link">
      <img src="https://via.placeholder.com/50?text=setting">
      <p>Settings & Privacy</p>
      <span>>></span>
    </a>
    <a href="#" class="profile-menu-link">
      <img src="https://via.placeholder.com/50?text=help">
      <p>Help & Support</p>
      <span>>></span>
    </a>
    <a href="#" class="profile-menu-link">
      <img src="https://via.placeholder.com/50?text=logout">
      <p>Logout</p>
      <span>>></span>
    </a>
  </div>
</div>

CSS代码

.profile-menu-wrap {
  position: absolute;
  top: 100%;
  right: 24%;
  width: 320px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
}

/* 修复后的选择器 */
.profile-menu-wrap.open-menu {
  max-height: 400px;
}

JavaScript代码

let profilemenu = document.getElementById("profileMenu");

function toggleMenu() {
  profilemenu.classList.toggle("open-menu");
}

效果说明 #

修改后，点击头像时，JavaScript会给#profileMenu元素添加/移除open-menu类，CSS通过正确的选择器匹配该元素，动态修改max-height值，配合transition属性实现平滑的展开/收起动画。

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