如何实现Zurb Foundation 6桌面端点击触发的响应式菜单？

Foundation 6默认桌面端下拉菜单为悬停触发，要改成点击触发可以通过以下两种方法实现：

方法一：修改Foundation组件配置 #

Foundation的下拉菜单组件支持通过初始化配置修改触发逻辑，直接指定trigger: 'click'即可：

$(document).foundation({
  dropdownMenu: {
    trigger: 'click'
  }
});

如果是用ES6模块方式引入Foundation，初始化时传入该配置参数同样生效。

方法二：自定义CSS+JS辅助（适配特殊场景） #

若遇到配置不生效的情况，可通过CSS先隐藏桌面端下拉菜单，再用JS监听点击事件控制显示状态：

1. 添加CSS覆盖默认悬停样式：

@media only screen and (min-width: 64em) { /* 对应Foundation默认桌面断点 */
  .dropdown.menu .is-dropdown-submenu-parent > a + .is-dropdown-submenu {
    display: none;
  }
  .dropdown.menu .is-dropdown-submenu-parent.is-active > a + .is-dropdown-submenu {
    display: block;
  }
}

2. 添加JS监听点击事件：

$(document).on('click', '.dropdown.menu .is-dropdown-submenu-parent > a', function(e) {
  e.preventDefault();
  $(this).parent().toggleClass('is-active');
  // 点击页面其他区域关闭已展开菜单
  $(document).one('click', function() {
    $('.dropdown.menu .is-dropdown-submenu-parent').removeClass('is-active');
  });
  e.stopPropagation();
});

额外提示 #

• 确保已正确引入Foundation的Dropdown Menu组件对应的JS和CSS文件
• 若使用Foundation 6.4及以上版本，优先使用方法一的配置方式，兼容性更好

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