Question

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

我试过了：

$(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');
});

感谢您的评论！

Answer 1

尝试使用$('.dropdown-btn').trigger('click.fndtn.dropdown')代替.trigger('click') ...作为基础命名命名空间的事件。

Answer 2

根据the docs，这是您应该这样做的方式：

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

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

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

以编程方式打开基础zurb下拉列表

2 个答案: