javascript - 避免在内部单击时关闭下拉菜单(Avoid dropdown menu close on click inside)

Question

I have a Twitter Bootstrap dropdown menu.(我有一个Twitter Bootstrap下拉菜单。)

As all Twitter Bootstrap users know, the dropdown menu closes on click (even clicking inside it).(正如所有Twitter Bootstrap用户所知，单击（甚至在其中单击）时，关闭菜单。)

To avoid this, I can easily attach a click event handler on the dropdown menu and simply add the famous event.stopPropagation() .(为了避免这种情况，我可以轻松地在下拉菜单上附加一个click事件处理程序，只需添加著名的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”.(但是，这看起来很简单，这是一种非常常见的行为，并且由于carousel-controls （以及carousel indicators ）事件处理程序被委派给了document对象，因此这些元素（上一个/下一个控件，...）上的click事件将是“忽略”。)

$('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:(由于以下原因，无法依靠Twitter Bootstrap下拉菜单hide / hidden事件：)

• The provided event object for both event handlers does not give reference to the clicked element(为两个事件处理程序提供的事件对象未提供对clicked元素的引用)
• I don't have control over the dropdown menu content so adding a flag class or attribute is not possible(我无法控制下拉菜单的内容，因此无法添加flag类或属性)

This fiddle is the normal behavior and this fiddle is with event.stopPropagation() added.(这小提琴是正常的行为， 这种小提琴是event.stopPropagation()加入。)

Update(更新资料)

Thanks to Roman for his answer .(感谢Roman 的回答 。)

I also found an answer that you can find below .(我还在下面找到了一个答案 。)   ask by php-dev translate from so

Answer 1

Removing the data attribute data-toggle="dropdown" and implementing the open/close of the dropdown can be a solution.(删除数据属性data-toggle="dropdown"并实现data-toggle="dropdown"的打开/关闭可以解决。)

First by handling the click on the link to open/close the dropdown like this :(首先，通过单击链接来打开/关闭下拉菜单，如下所示：)

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

and then listening the clicks outside of the dropdown to close it like this :(然后听下拉菜单外的点击以将其关闭，如下所示：)

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});

Here is the demo : http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/(这是演示： http : //jsfiddle.net/RomaLefrancois/hh81rhcm/2/)