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

当我单击另一个下拉列表中的项目时，我试图打开 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>

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

需要注意的几件事：

• 如果你想通过点击另一个元素来触发它，你必须 终止另一个元素上的点击事件- 否则 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');
  }
});

小提琴示例 https://jsfiddle.net/gsj5o3j6/4/