以编程方式打开基础 zurb 下拉菜单

Posted 2023-02-19

【中文标题】以编程方式打开基础 zurb 下拉菜单

【英文标题】：Open foundation zurb dropdown programmatically

【发布时间】：2015-05-23 01:36:03

【问题描述】：

我正在构建一个带有基础下拉菜单的购物车，因此我需要一种以编程方式打开下拉菜单的方法。 有什么办法吗？

我试过了：

$(document).foundation('dropdown', 'open', ($('#top-bar-cart'), $('.top-bar-cart-link'));

这个：

Foundation.libs.dropdown.open($('#top-bar-cart'), $('.top-bar-cart-link'));

还有这个：

$('.dropdown-btn').trigger('click');

但目前没有成功。

编辑：

我想我找到了问题所在。 我在点击事件中使用代码来测试它，所以我需要这个：

e.stopImmediatePropagation();

让它工作。 完整示例：

$('#button').click(function(e) 
  e.preventDefault();
  e.stopImmediatePropagation();

  // use this (most correct way, I think)
  Foundation.libs.dropdown.open($('#top-bar-cart'), $('.top-bar-cart-link'));
  // or this
  //('.top-bar-cart-link').trigger('click');
);

感谢cmets！

【问题讨论】：

jsfiddle.net/k1gonvvc 这个工作

第二个和第三个选项有效，第一个无效。您应该提供一个完整的示例，因为您的错误可能在其他地方。

这是我为这个问题找到的唯一可行的解​​决方案。 e.preventDefault();和 e.stopImmediatePropagation();是使这项工作正常进行的关键位。非常感谢。

【参考方案1】：

尝试使用$('.dropdown-btn').trigger('click.fndtn.dropdown') 而不是.trigger('click') ... 作为 Foundation 命名空间的事件。

【参考方案2】：

根据the docs，你应该这样做：

$('#top-bar-cart, .top-bar-cart-link').foundation('open');

...或者如果您自己初始化了下拉菜单：

const dropdown = new Foundation.Dropdown($('#dropdown'))
dropdown.open()