如何以编程方式打开 Bootstrap 下拉菜单

本文介绍了如何以编程方式打开 Bootstrap 下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

当我点击另一个下拉列表中的一个项目时，我试图打开一个 Bootstrap 下拉列表.

想法是从第一个下拉列表中选择一个城市 - 然后脚本将自动打开带有区域的第二个下拉列表(并仅显示与所选城市对应的区域).

这是我的 JS:

$('#sidebar_filter_city li').click(function(){$('#sidebar_filter_areas').dropdown('toggle');});

这是 HTML:

<div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city">泽西城<span class="caret caret_sidebar"></span></div><input type="hidden" name="advanced_city" value="jersey-city"><ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities"><li role="presentation" data-value="">所有城市</li><li role="presentation" data-value="jersey-city">泽西城</li><li role="presentation" data-value="london">伦敦</li><li role="presentation" data-value="new-york">纽约</li>

<div class="下拉表单控件"><div data-toggle="dropdown" id="sidebar_filter_areas" class="sidebar_filter_menu">所有区域<span class="caret caret_sidebar"></span>

<input type="hidden" name="advanced_area" value=""><ul id="sidebar_filter_area" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_areas"><li role="presentation" data-value="">所有区域</li><li role="presentation" data-value="east-harlem" data-parentcity="">East Harlem</li><li role="presentation" data-value="greenville" data-parentcity="">Greenville</li><li role="presentation" data-value="manhattan" data-parentcity="">Manhattan</li><li role="presentation" data-value="northern-brooklyn" data-parentcity="">北布鲁克林</li>.....

解决方案

最好的方法是检查下拉菜单是否还没有打开，然后使用.dropdown('toggle').

需要注意的几件事:

• 如果你想通过点击另一个元素来触发它，你必须杀死另一个元素上的点击事件 - 否则 Bootstrap 将将其视为下拉菜单外的点击并立即关闭它.
• $('.dropdown').addClass('open') 不是一个好的替代品$('.dropdown-toggle').dropdown('toggle') 如其他答案，因为它会导致下拉菜单永久打开而不是在您点击组件时关闭.

HTML:

<button class="btn btn-secondary trigger_button">触发下拉菜单</button><br><br><div class="下拉"><button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">落下<div class="下拉菜单">东西...

JS:

$('.trigger_button').click(function(e){//杀死点击事件:e.stopPropagation();//如果不可见，则切换下拉菜单:if ($('.dropdown').find('.dropdown-menu').is(":hidden")){$('.dropdown-toggle').dropdown('toggle');}});

小提琴示例

I'm trying to open a Bootstrap dropdown when I click a item of another dropdown.

The idea is to select a city from the first drop down - then the script will auto open the second dropdown with areas (and show only areas corresponding to the chosen city).

Here is my JS:

$('#sidebar_filter_city li').click(function(){ $('#sidebar_filter_areas').dropdown('toggle'); });

and this is the HTML:

<div class="dropdown form-control"> <div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city">Jersey City<span class="caret caret_sidebar"></span></div> <input type="hidden" name="advanced_city" value="jersey-city"> <ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities"> <li role="presentation" data-value="">All Cities</li> <li role="presentation" data-value="jersey-city">Jersey City</li> <li role="presentation" data-value="london">London</li> <li role="presentation" data-value="new-york">New York</li> </ul> </div> </div> <div class="dropdown form-control"> <div data-toggle="dropdown" id="sidebar_filter_areas" class="sidebar_filter_menu">All Areas<span class="caret caret_sidebar"></span> </div> <input type="hidden" name="advanced_area" value=""> <ul id="sidebar_filter_area" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_areas"> <li role="presentation" data-value="">All Areas</li> <li role="presentation" data-value="east-harlem" data-parentcity="">East Harlem</li> <li role="presentation" data-value="greenville" data-parentcity="">Greenville</li> <li role="presentation" data-value="manhattan" data-parentcity="">Manhattan</li> <li role="presentation" data-value="northern-brooklyn" data-parentcity="">Northern Brooklyn</li> ..... </ul> </div> </div>

解决方案

The best way is to check if the dropdown is not already open, and then to use .dropdown('toggle').

Couple things to be aware of:

• If you want to trigger it by clicking on another element, you must kill the click event on the other element- otherwise Bootstrap will treat it as a click outside of the dropdown and immediately close it.
• $('.dropdown').addClass('open') is not a good replacement for $('.dropdown-toggle').dropdown('toggle') as suggested in other answers, because it will cause the dropdown to stay permanently open instead of closing when you click off of the component.

HTML:

<button class="btn btn-secondary trigger_button">Trigger dropdown</button><br><br> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown </button> <div class="dropdown-menu"> Stuff... </div> </div>

JS:

$('.trigger_button').click(function(e){ // Kill click event: e.stopPropagation(); // Toggle dropdown if not already visible: if ($('.dropdown').find('.dropdown-menu').is(":hidden")){ $('.dropdown-toggle').dropdown('toggle'); } });

Fiddle example