3

我正在使用这个 zurb-foundation 下拉按钮 - http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown_buttons.html

但是当用户在下拉按钮本身之外单击或当用户单击下拉列表中的项目时，我还有一个额外的要求来关闭下拉列表，因此我需要一种以编程方式在单击时关闭打开的下拉列表的方法事件。

我需要以编程方式关闭打开的下拉列表的 javascript 调用是什么？

4

7 回答 7

12

经过一番搜索，这里有一种稍微干净的方法：

Foundation.libs.dropdown.close($('#id_of_dropdown_list'));
于 2013-09-18T10:59:57.997 回答
4

老问题，但这对我有用。

$(document).foundation('dropdown', 'close', $('.f-dropdown'));
于 2014-11-08T14:48:42.123 回答
3

在 Foundation 6.2 中，您可以执行以下操作：

$('.dropdown-pane').foundation('close');

供参考： http: //foundation.zurb.com/sites/docs/dropdown.html#close

于 2016-06-06T19:38:57.493 回答
2

对于 Foundation 6.3.0，如果您想在单击下拉按钮外部时关闭下拉列表，只需data-close-on-click="true"在下拉窗格中添加数据属性即可。我的代码中有这个：

<div class="small warning button-group">
    <a class="dropdown button arrow-only float-right" data-toggle="dropdown-menu-1">
        <span class="show-for-sr">Show menu</span>
    </a>
    <a class="button float-right" href="/vacancies/show">View</a>

    <div class="dropdown-pane bottom" id="dropdown-menu-1" data-dropdown data-close-on-click="true">
        <a href="">Edit</a>
    </div>
</div>

更多：https ://foundation.zurb.com/sites/docs/dropdown.html#js-options

于 2017-01-10T21:16:21.730 回答
0

这是一种方法：-

$("#id_of_dropdown").removeClass("open").css("left", "-99999px");
于 2013-08-01T04:04:58.093 回答
0

您还需要附加到下拉 ul 元素的 data-dropdown-content 属性。

参考：https ://github.com/zurb/foundation/issues/1831#issuecomment-15133817

于 2013-12-17T23:36:45.833 回答
0

Dropdown如您在此处看到的，该元素存在关闭/打开/切换的编程方法。这些可以按照allicarn 的建议触发。

但是对于DropdownMenu元素，不存在关闭/打开方法。如果有人需要这些，您可以模拟打开/关闭点击：

document.querySelector('.dropdown .value').click()
于 2019-05-22T09:41:36.377 回答