如何以编程方式打开Bootstrap下拉菜单
我试图打开一个引导下拉菜单，当我点击另一个下拉菜单项。
我们的想法是从第一个下拉列表中select一个城市 – 然后脚本将自动打开第二个下拉菜单（仅显示与所选城市相对应的区域）。
这是我的JS：
$('#sidebar_filter_city li').click(function(){ $('#sidebar_filter_areas').dropdown('toggle'); }); 这是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>
对于Bootstrap 3，您可以将“打开”类添加到下拉列表中。 删除它closures下拉菜单。
$('.dropdown').addClass('open'); // Opens the dropdown $('.dropdown').removeClass('open'); // Closes it
这可能在其他版本，但我不知道。
最好的方法是检查下拉列表是否已经打开，然后使用.dropdown('toggle') 。
夫妇的事情要注意的是：
- 如果要通过单击另一个元素来触发它，则必须终止其他元素上的点击事件，否则Bootstrap会将其视为在下拉菜单之外的点击并立即closures它。
-
$('.dropdown').addClass('open')不是一个很好的替代$('.dropdown-toggle').dropdown('toggle')build议在其他答案中，因为它会导致下拉菜单当您点击组件时，永久打开而不是closures。
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'); } });
小提琴的例子
Bootstrap的下拉式插件等待“click.bs.dropdown”事件显示菜单，所以在这种情况下：
$('#sidebar_filter_areas').trigger('click.bs.dropdown');
应该pipe用。 这将不会触发相同元素上的其他“点击”事件（如果有的话）。
dropdown('toggle')在使用button标签时非常适合我。
JS
$("#mybutton").dropdown('toggle')
HTML
<button class="dropdown-toggle ban" role="button" data-toggle="dropdown" data-target="#" id="mybutton">...</button>
如果绝对没有人在做这个伎俩，那么你可以做如下的事情：
$('.dropdown').addClass('open'); // substitute with your own selector $('.dropdown-toggle').attr('aria-expanded', true).focus(); // substitute with your own selector
虽然上面的工作，我不build议使用它，因为它有点哈克。
您需要停止从冒泡到父元素的点击事件
$('#sidebar_filter_city li').click(function(e){ $('#sidebar_filter_areas').dropdown('toggle'); e.stopPropagation(); });
你也可以使用return false; 这将做同样的事情，但这也将阻止点击默认。
这对我有用。
$('.dropdown-toggle').click(function (ev) { ev.stopPropagation(); $(this).parent().toggleClass('open'); });
标记：
<div class="dropdown pull-right"> <button class="btn btn-default dropdown-toggle task-actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <img src="{{ asset('img/site/icons/menu.svg') }}" alt="Menu"> </button> <ul id="dropdown-overview" class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
只需在数据切换元素上使用e.stopPropagation()但不要忘记e.stopPropagation()
这一个简单的线我花了几个小时，希望它的帮助:)
大部分时间充当手动操作作品：
$('#sidebar_filter_city li').click(function(){ $('#sidebar_filter_areas').click(); });
如果你检查打开的下拉菜单，你可以看到select器改变下拉菜单的显示。 在bootstrap v3.0.0中，cssselect器是：
.open > .dropdown-menu { display: block; }
所以打开的类应该被添加到.dropdown-menu类的元素的父节点。 在其他版本中，如果它已经被改变了，那么正确的select器可能以相同的方式被find。
试试这个：$（'＃sidebar_filter_areas'）。click（）;
根据引导文档，你可以简单地使用这个：
$('.dropdown-toggle').dropdown();
