Tailwind/Flowbite技术问题：点击外部如何关闭下拉菜单？

优先使用Flowbite原生方案 #

Flowbite 2.x版本不再自动初始化所有组件，你的代码缺少下拉组件的初始化步骤，导致点击外部关闭的内置功能未生效。只需添加初始化代码即可：

在</body>标签前插入以下脚本：

document.addEventListener('DOMContentLoaded', function() {
  // 初始化所有下拉组件
  initDropdowns();
});

或者也可以单独初始化目标下拉按钮：

document.addEventListener('DOMContentLoaded', function() {
  const dropdownBtn = document.getElementById('dropdownDefaultButton');
  new Dropdown(dropdownBtn);
});

添加后，Flowbite的内置点击外部关闭功能就会正常工作。

原生JS替代方案（不依赖Flowbite内置逻辑） #

如果上述方案无效，可以用原生JS实现点击外部关闭：

在</body>标签前插入以下脚本：

const dropdownBtn = document.getElementById('dropdownDefaultButton');
const dropdownMenu = document.getElementById('dropdown');

// 按钮点击切换菜单显示/隐藏
dropdownBtn.addEventListener('click', function(e) {
  e.stopPropagation(); // 避免触发document的点击事件直接隐藏菜单
  dropdownMenu.classList.toggle('hidden');
});

// 监听document点击，判断是否点击外部
document.addEventListener('click', function(e) {
  const isInDropdown = dropdownBtn.contains(e.target) || dropdownMenu.contains(e.target);
  if (!isInDropdown && !dropdownMenu.classList.contains('hidden')) {
    dropdownMenu.classList.add('hidden');
  }
});

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