如何以编程方式打开 Bootstrap 下拉菜单 [英] How to open Bootstrap dropdown programmatically

查看：27
本文介绍了如何以编程方式打开 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').

需要注意的几件事:

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:

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

这篇关于如何以编程方式打开 Bootstrap 下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆