如何用JS实现按钮切换元素可见性及下拉列表互斥关闭

一、点击按钮切换元素可见性 #

你的初始toggleElement函数存在隐患：如果元素的display是通过外部CSS（而非行内样式）设置的，element.style.display会返回空字符串，导致判断逻辑失效。推荐两种更可靠的实现方式：

方案1：基于计算样式修正切换逻辑 #

通过获取元素的计算样式来判断真实显示状态：

function toggleElement(elementId) {
  const element = document.querySelector(elementId);
  const currentDisplay = window.getComputedStyle(element).display;
  element.style.display = currentDisplay === "none" ? "block" : "none";
}

方案2：用CSS类控制显隐（更易维护） #

先定义CSS类：

.hidden {
  display: none !important;
}

再修改JS函数：

function toggleElement(elementId) {
  const element = document.querySelector(elementId);
  element.classList.toggle('hidden');
}

二、点击其他父元素时关闭已打开的下拉列表 #

你尝试的思路是对的，但失效可能是因为选择器不匹配、var的作用域问题，或是缺少当前元素的状态判断。以下是修正后的完整代码：

基于行内样式的实现 #

function toggleDropdown(targetId) {
  // 获取所有下拉元素（确保选择器匹配你的实际下拉列表）
  const allDropdowns = document.querySelectorAll('.child-element');
  const targetDropdown = document.querySelector(targetId);
  // 判断当前目标是否处于展开状态
  const isTargetOpen = window.getComputedStyle(targetDropdown).display !== "none";

  // 关闭所有下拉列表
  allDropdowns.forEach(dropdown => {
    dropdown.style.display = "none";
  });

  // 若当前目标原本是关闭状态，则打开它；否则保持关闭（实现切换）
  if (!isTargetOpen) {
    targetDropdown.style.display = "block";
  }
}

document.addEventListener("DOMContentLoaded", function() {
  // 用querySelectorAll避免动态集合的意外问题
  const menuContainers = document.querySelectorAll(".ContainerForMenu");
  menuContainers.forEach(container => {
    container.addEventListener("click", function() {
      const target = this.getAttribute("data-target");
      toggleDropdown(target);
    });
  });
});

基于CSS类的优化实现（更简洁） #

function toggleDropdown(targetId) {
  const allDropdowns = document.querySelectorAll('.child-element');
  const targetDropdown = document.querySelector(targetId);
  const isTargetOpen = !targetDropdown.classList.contains('hidden');

  // 给所有下拉添加隐藏类
  allDropdowns.forEach(dropdown => {
    dropdown.classList.add('hidden');
  });

  // 若当前目标原本关闭，则移除隐藏类
  if (!isTargetOpen) {
    targetDropdown.classList.remove('hidden');
  }
}

document.addEventListener("DOMContentLoaded", function() {
  const menuContainers = document.querySelectorAll(".ContainerForMenu");
  menuContainers.forEach(container => {
    container.addEventListener("click", function() {
      const target = this.getAttribute("data-target");
      toggleDropdown(target);
    });
  });
});

关键改进点 #

• 用querySelectorAll替代getElementsByClassName，避免动态集合带来的意外问题
• 用forEach循环配合块级作用域，解决var导致的事件绑定异常
• 增加当前元素的状态判断，实现点击已展开父元素时可关闭下拉

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