Question

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

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

我需要以编程方式关闭打开的下拉列表来进行javascript调用吗？

Answer 1

经过一些搜索后，这是一种更简洁的方法：

Foundation.libs.dropdown.close($('#id_of_dropdown_list'));

Answer 2

老问题，但这对我有用。

$(document).foundation('dropdown', 'close', $('.f-dropdown'));

Answer 3

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

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

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

Answer 4

使用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

Answer 5

这是一种方法： -

$("#id_of_dropdown").removeClass("open").css("left", "-99999px");

Answer 6

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

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

Answer 7

Dropdown元素存在关闭/打开/切换的编程方法，如您所见here。这些可以被as suggested by allicarn触发。

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

document.querySelector('.dropdown .value').click()

以编程方式关闭下拉按钮

7 个答案: