Проверьте статус Bootstraps выпадающего меню

Question

Я хочу использовать jQuery, чтобы открыть и закрыть раскрывающийся список. Я проверил этот вопрос, но он только открыт. Как программно открыть выпадающий список Bootstrap Я нашел эти две команды, чтобы открыть и закрыть его.

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

Однако как узнать текущее состояние выпадающего меню? Я хочу щелкнуть, чтобы закрыть, если он открыт, и щелкнуть, чтобы открыть, если он закрыт.

Answer 1

Если вы посмотрите на документы , есть один метод toggle для открытия и закрытия. Как следует из названия, оно в основном «переключается» между состояниями.

Вы используете его как:

$('#example').dropdown('toggle');

Но я рекомендую вам обновить до Bootstrap 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;