检查下拉菜单引导程序的状态

Question

我想使用 jQuery 打开和关闭下拉菜单。我检查了这个问题，但它只是关于开放。 如何以编程方式打开 Bootstrap 下拉菜单 我找到了这两个命令来打开和关闭它。

$('.dropdown-menu').show();

$('.dropdown-menu').close();

但是，我如何知道下拉列表的当前状态？如果打开，我想点击关闭，如果关闭，我想点击打开。

Answer 1

如果您查看文档，则有一种方法toggle可以同时打开和关闭。顾名思义，它基本上在状态之间“切换”。你像这样使用它：$('#example').dropdown('toggle');但我建议您升级使用引导4，因为这增加了许多新功能，负载，包括几种新方法的dropdown。使用新方法，您可以将两个操作分开：$('#example').dropdown('show');$('#example').dropdown('hide');要确定任一版本的当前状态，您可以利用aria-expanded下拉<a>切换开关上的属性。此属性根据它是打开还是关闭来更改它的布尔值。您可以创建一个if语句检查，例如：if($("#example .dropdown-toggle[aria-expanded='true'") {&nbsp; &nbsp;// dropdown open, so we can close it now.}

Answer 2

您可以收听事件：// var to be visible in the global scopevar status = false; // default hidden&nbsp;$('#myDropdown').on('hidden.bs.dropdown', () => status = false)$('#myDropdown').on('shown.bs.dropdown', () => status = true)稍后您可以检查该status值；