Dropdown按钮仅点击边缘有效，点击文本无响应问题求助

你的问题出在事件目标的判断逻辑上：当点击按钮内的<h4>或<i>元素时，e.target指向的是这些子元素，而非带有data-dropdown-button属性的<button>标签，导致e.target.matches("[data-dropdown-button]")返回false，触发下拉的核心逻辑无法执行。

解决方案 #

修改JavaScript中的事件判断逻辑，使用closest()方法检测点击元素是否属于下拉按钮的内部：

document.addEventListener("click", e => {
  // 查找点击元素所属的下拉按钮
  const dropdownButton = e.target.closest("[data-dropdown-button]")
  const isDropdownButton = dropdownButton !== null

  if (!isDropdownButton && e.target.closest("[data-dropdown]") != null) return

  let currentDropdown
  if (isDropdownButton) {
    // 通过按钮找到对应的下拉容器
    currentDropdown = dropdownButton.closest("[data-dropdown]")
    currentDropdown.classList.toggle("active")
  }

  // 关闭其他已激活的下拉菜单
  document.querySelectorAll("[data-dropdown].active").forEach(dropdown => {
    if (dropdown === currentDropdown) return
    dropdown.classList.remove("active")
  })
})

原理说明 #

closest()方法会从当前触发事件的元素开始，向上遍历DOM树，找到第一个匹配指定选择器的祖先元素。这样不管点击按钮内的文本、图标还是按钮本身，都能正确识别为下拉按钮的点击操作，触发下拉逻辑。

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