点击Flowbite导航栏链接时关闭移动端下拉菜单的实现方法

实现思路 #

Flowbite默认导航栏的下拉菜单由data-collapse-toggle属性绑定的汉堡按钮控制显示/隐藏状态。我们只需要给所有移动端导航链接添加点击事件，在点击时触发汉堡按钮的点击动作，就能自动关闭下拉菜单。

具体代码实现 #

原生JavaScript版本

适配官方默认导航栏结构，代码如下：

// 获取所有移动端导航链接
const mobileNavLinks = document.querySelectorAll('#navbar-default a');
// 获取汉堡切换按钮
const hamburgerToggle = document.getElementById('navbar-default-toggle');

// 给每个链接绑定点击事件
mobileNavLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 检查菜单是否处于展开状态
    const menuIsOpen = hamburgerToggle.getAttribute('aria-expanded') === 'true';
    if (menuIsOpen) {
      // 触发汉堡按钮点击，关闭菜单
      hamburgerToggle.click();
    }
  });
});

注意：如果你的导航栏或汉堡按钮用了自定义ID，替换代码中对应的选择器即可。

jQuery版本（项目已引入jQuery时使用）

$('#navbar-default a').click(function() {
  const $toggleBtn = $('#navbar-default-toggle');
  if ($toggleBtn.attr('aria-expanded') === 'true') {
    $toggleBtn.click();
  }
});

原理说明 #

Flowbite内置的导航栏逻辑通过汉堡按钮的aria-expanded属性判断菜单状态，模拟点击汉堡按钮会触发其自带的折叠逻辑，无需额外修改组件样式或核心代码，兼容性和维护性更好。

内容的提问来源于stack exchange，提问作者one-hand-octopus