HTML/CSS/JS下拉按钮问题：内部下拉自动展开及功能失效修复

问题说明 #

现有嵌套下拉按钮实现存在两个问题：

• 点击主下拉的「Sample」标签时，内部嵌套的下拉菜单会自动展开
• 内部下拉按钮无法独立触发展开/收起操作

修复后代码实现 #

HTML 结构

<div class="dropdown">
  <button class="dropbtn">Sample</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <!-- 内部下拉菜单 -->
    <div class="dropdown nested-dropdown">
      <button class="dropbtn nested-dropbtn">Nested Dropdown</button>
      <div class="dropdown-content nested-dropdown-content">
        <a href="#">Nested Link 1</a>
        <a href="#">Nested Link 2</a>
        <a href="#">Nested Link 3</a>
      </div>
    </div>
    <!-- 第二个内部下拉，无需新增类 -->
    <div class="dropdown nested-dropdown">
      <button class="dropbtn nested-dropbtn">Another Nested Dropdown</button>
      <div class="dropdown-content nested-dropdown-content">
        <a href="#">Another Nested Link 1</a>
        <a href="#">Another Nested Link 2</a>
      </div>
    </div>
  </div>
</div>

CSS 样式

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

/* 内部下拉的位置调整 */
.nested-dropdown {
  display: block;
}

.nested-dropdown-content {
  left: 100%;
  top: 0;
}

.show {display:block;}

JavaScript 逻辑

// 获取所有下拉按钮（主下拉和内部下拉）
const dropbtns = document.querySelectorAll('.dropbtn');

dropbtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 判断当前点击的是主下拉还是内部下拉
    const isNested = this.classList.contains('nested-dropbtn');
    
    // 如果是主下拉被点击：
    if (!isNested) {
      // 收起所有内部下拉菜单
      document.querySelectorAll('.nested-dropdown-content').forEach(content => {
        content.classList.remove('show');
      });
      // 切换主下拉菜单的显示状态
      this.nextElementSibling.classList.toggle('show');
    } else {
      // 如果是内部下拉被点击：
      // 阻止事件冒泡，避免触发主下拉的点击事件
      e.stopPropagation();
      // 切换当前内部下拉菜单的显示状态
      this.nextElementSibling.classList.toggle('show');
    }
  });
});

// 点击页面其他区域关闭所有下拉菜单
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    const dropdowns = document.querySelectorAll('.dropdown-content');
    dropdowns.forEach(content => {
      if (content.classList.contains('show')) {
        content.classList.remove('show');
      }
    });
  }
}

关键改动说明 #

1. 主下拉展开时强制收起内部下拉：点击主下拉按钮时，主动遍历所有内部下拉菜单并移除show类，确保内部下拉保持收起状态。
2. 分离控制逻辑：通过判断按钮是否带有nested-dropbtn类区分主/内部下拉，内部下拉点击时调用e.stopPropagation()阻止事件向上冒泡，避免触发主下拉的逻辑。
3. 支持多内部下拉：使用通用的类选择器（nested-dropdown、nested-dropbtn），新增内部下拉时直接复用现有类即可，无需重复定义类名。

内容的提问来源于stack exchange，提问作者s.ha11