避免下拉菜单在内部点击时关闭 [英] Avoid dropdown menu close on click inside

问题描述

我有一个 Twitter Bootstrap 下拉菜单.所有 Twitter Bootstrap 用户都知道，下拉菜单会在点击时关闭(甚至在其中点击).

为了避免这种情况，我可以轻松地在下拉菜单上附加一个点击事件处理程序，然后简单地添加著名的 event.stopPropagation().

<li class="dropdown mega-dropdown"><a href="javascript:;"class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list-alt"></i>菜单项 1<span class="fa fa-chevron-down pull-right"></span></a><ul class="dropdown-menu mega-dropdown-menu"><li><div id="carousel" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-slide-to="0" data-target="#carousel"></li><li class="active" data-slide-to="1" data-target="#carousel"></li></ol><div class="carousel-inner"><div class="item"><img alt="" class="img-rounded" src="img1.jpg">

<div class="item active"><img alt="" class="img-rounded" src="img2.jpg">

<a data-slide="prev" role="button" href="#carousel"class="左轮播控制"><span class="glyphicon glyphicon-chevron-left"></span></a><a data-slide="next" role="button" href="#carousel"class="右轮播控制"><span class="glyphicon glyphicon-chevron-right"></span></a>

这看起来很简单而且是一个非常常见的行为，然而，由于 carousel-controls(以及 carousel indicator)事件处理程序被委托给 document 对象，这些元素(prev/next 控件，...)上的 click 事件将被忽略".

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){//该事件不会传播到文档节点和//因此不会触发委托事件event.stopPropagation();});

依赖 Twitter Bootstrap 下拉hide/hidden 事件不是解决方案，原因如下:

• 为两个事件处理程序提供的事件对象没有引用被点击的元素
• 我无法控制下拉菜单内容，因此无法添加 flag 类或属性

这个小提琴是正常行为，这个小提琴 添加了event.stopPropagation().

更新

感谢 Roman 他的回答.我还找到了一个您可以在下面找到的答案.

解决方案

这可能会有所帮助:

$("dropdownmenuname").click(function(e){e.stopPropagation();})

I have a Twitter Bootstrap dropdown menu. As all Twitter Bootstrap users know, the dropdown menu closes on click (even clicking inside it).

To avoid this, I can easily attach a click event handler on the dropdown menu and simply add the famous event.stopPropagation().

<ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
            </div>
          </div>
          <a data-slide="prev" role="button" href="#carousel" 
             class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a data-slide="next" role="button" href="#carousel" 
             class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

This looks easy and a very common behavior, however, and since carousel-controls (as well as carousel indicators) event handlers are delegated to the document object, the click event on these elements (prev/next controls, ...) will be "ignored".

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});

Relying on Twitter Bootstrap dropdown hide/hidden events is not a solution for the following reasons:

• The provided event object for both event handlers does not give reference to the clicked element
• I don't have control over the dropdown menu content so adding a flag class or attribute is not possible

This fiddle is the normal behavior and this fiddle is with event.stopPropagation() added.

Update

Thanks to Roman for his answer. I also found an answer that you can find below.

解决方案

This might help:

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})

这篇关于避免下拉菜单在内部点击时关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！