相关疑难解决方法(0)

是否可以通过使用twitter bootstrap 2的元素来获得多级下拉菜单？原始版本没有此功能.

当我点击另一个下拉菜单项时,我正在尝试打开一个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 …

我正在使用bootstrap3.0,它具有出色的下拉菜单.

如果我单击下拉菜单的一侧,菜单将消失,这是非常正确的.

但是当我点击下拉菜单中的项目时,它也会消失.我认为这不是正确的,并且没有选项可以控制它的切换行为.(当我点击项目时,我需要打开菜单,比如facebook通知菜单)

所以我想我必须修改bootstrap的来源,我不是真的想要.所以在我触摸源之前,我想知道有没有好的解决方法？如果没有,如何更改源以获得最小的bootstrap影响？

谢谢你的想法.

传递给hide.bs.dropdown处理函数的event.target是下拉列表本身，而不是启动事件的元素。

如何从hide.bs.dropdown事件对象获取启动事件的元素？

<div class="dropdown" id='drop'>
    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown trigger
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
         ...
    </ul>
</div>
<button class='btn btn-primary'>Other Button</button>

Javascript：

$('#drop').on('hide.bs.dropdown', function(e) {
    console.log(e.target);  //
})

打开下拉菜单，单击按钮，查看console.log目标。
JSFiddle：http : //jsfiddle.net/DTcHh/4215/

如果可能的话，我不希望将click事件绑定到整个页面。

我试图防止在单击文档中的某些元素时关闭下拉菜单。

更新资料

我最终使用了这种方法：https : //stackoverflow.com/a/19797577/2414886但是我仍然希望有一个更紧凑的解决方案。

我有一个引导下拉菜单。我希望它在我点击内部时保持打开状态，但在点击下拉切换按钮或菜单外部时关闭。

当我在其中键入内容时，下拉菜单似乎没有关闭，input但是当我单击下拉列表中的任何其他位置时它会关闭。

问：如何使用 jQuery 避免这种情况？

下面是我的HTML：

<div id="navbar">
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a> 
          <div class="dropdown-menu">
            <p>HELLO</p>
            <input>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

Bootply 中的演示

避免通过单击外部关闭下拉列表。仅单击按钮时显示和隐藏下拉列表。这是小提琴。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>