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

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'") {

   // dropdown open, so we can close it now.

}

Answer 2

您可以收听事件：

// var to be visible in the global scope

var status = false; // default hidden 

$('#myDropdown').on('hidden.bs.dropdown', () => status = false)

$('#myDropdown').on('shown.bs.dropdown', () => status = true)

稍后您可以检查该status值；