如何以编程方式打开Bootstrap下拉列表

Question

当我点击另一个下拉菜单项时,我正在尝试打开一个Bootstrap下拉列表.

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

这是我的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>

Answer 1

最好的方法是检查下拉列表是否尚未打开,然后再使用.dropdown('toggle').

要注意的事情:

• 如果要通过单击另一个元素来触发它,则必须终止另一个元素上的click事件 - 否则Bootstrap会将其视为下拉列表外的单击并立即将其关闭.
• $('.dropdown').addClass('open')不是$('.dropdown-toggle').dropdown('toggle')其他答案中建议的好替代品 ,因为它会导致下拉列表永久打开而不是在单击组件时关闭.

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');
  }
});

小提琴的例子

Answer 2

对于Bootstrap 3,您只需将"打开"类添加到下拉标记即可.删除它会关闭下拉列表.

$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

这可能适用于其他版本,但我不确定.

Answer 3

Bootstrap的下拉插件等待'click.bs.dropdown'事件显示菜单,所以在这种情况下:

$('#sidebar_filter_areas').trigger('click.bs.dropdown');

应该管用.如果有的话,这不会触发相同元素上的其他"点击"事件.

Answer 4

dropdown('toggle') 在使用按钮标签时对我很有用.

JS

$("#mybutton").dropdown('toggle')

HTML

<button class="dropdown-toggle ban" role="button" data-toggle="dropdown" data-target="#" id="mybutton">...</button>

Answer 5

您需要阻止单击事件冒泡到父元素

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

您也可以使用return false;which 会做同样的事情，但这也会在点击时阻止默认。

Answer 6

如果他们中的任何一个都没有做到这一点，那么您可以执行以下操作：

$('.dropdown').addClass('open'); // substitute with your own selector
$('.dropdown-toggle').attr('aria-expanded', true).focus(); // substitute with your own selector

尽管上述方法可行，但我不建议使用它，因为它有点老套。

Answer 7

我喜欢使用具有更多用户预期行为的东西：

if(!$('#myDropdown').hasClass('show')){
  $('#myDropdown').dropdown('toggle');
}

如果它已经打开，则不要执行任何操作。如果它是关闭的，那么它应该打开。