单击里面,避免关闭下拉菜单

Question

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

为了避免这种情况,我可以在下拉菜单上轻松附加一个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>

然而,这看起来很容易并且是非常常见的行为,并且由于carousel-controls(以及carousel indicators)事件处理程序被委托给document对象,因此click这些元素上的事件(prev/next controls,...)将被"忽略".

$('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();
});

由于以下原因,依赖Twitter Bootstrap下拉hide/ hidden事件不是解决方案:

• 两个事件处理程序提供的事件都不会引用您单击的元素
• 下拉菜单内容是动态生成的,因此flag无法添加类

这个小提琴是正常的行为,这个小提琴是event.stopPropagation()附加的.

更新

感谢罗曼的回答.我也找到了一个你可以在下面找到的答案.

Answer 1

删除数据属性data-toggle="dropdown"并实现下拉列表的打开/关闭可以是一种解决方案.

首先通过处理链接上的点击来打开/关闭下拉列表,如下所示:

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

然后听取下拉列表外的点击以关闭它,如下所示:

$('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');
    }
});

这是演示:http: //jsfiddle.net/RomaLefrancois/hh81rhcm/2/

Answer 2

这也应该有所帮助

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});

Answer 3

在新的 Bootstrap 5 中，解决方案非常简单。

引用文档页面：

默认情况下，单击下拉菜单内部或外部时，下拉菜单会关闭。您可以使用 autoClose 选项来更改下拉列表的这种行为。

除了默认行为之外，我们还有 3 个可用选项：

• 外部可点击：data-bs-auto-close="outside"
• 里面可点击：data-bs-auto-close="inside"
• 手动关闭：data-bs-auto-close="false"

例如：

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" data-bs-auto-close="inside" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

更多信息：https://getbootstrap.com/docs/5.1/components/dropdowns/#auto-close-behavior

Answer 4

Bootstrap提供以下功能:

                 | This event is fired immediately when the hide instance method 
hide.bs.dropdown | has been called. The toggling anchor element is available as the 
                 | relatedTarget property of the event.

因此,实现此功能应该能够禁止关闭下拉列表.

$('#myDropdown').on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
    }else{
        return true;
    }
});

Answer 5

绝对最好的答案是在类下拉菜单后面添加一个表单标记

所以你的代码是

<ul class="dropdown-menu">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>

Answer 6

我也找到了解决方案.

假设Twitter Bootstrap Components相关事件处理程序被委托给document对象,我循环附加的处理程序并检查当前单击的元素(或其父项之一)是否与委托事件有关.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    var events = $._data(document, 'events') || {};
    events = events.click || [];
    for(var i = 0; i < events.length; i++) {
        if(events[i].selector) {

            //Check if the clicked element matches the event selector
            if($(event.target).is(events[i].selector)) {
                events[i].handler.call(event.target, event);
            }

            // Check if any of the clicked element parents matches the 
            // delegated event selector (Emulating propagation)
            $(event.target).parents(events[i].selector).each(function(){
                events[i].handler.call(this, event);
            });
        }
    }
    event.stopPropagation(); //Always stop propagation
});

希望它可以帮助任何人寻找类似的解决方案.

感谢大家的帮助.

Answer 7

$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});

这可能适用于任何条件.

Answer 8

这可能有所帮助:

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

Answer 9

我尝试了这个简单的事情，它就像一个魅力。

我将下拉菜单元素从更改<div>为<form>并且效果很好。

<div class="nav-item dropdown" >
  <a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
   Click to open dropdown
 </a>
 <form class="dropdown-menu   ">
  <ul class="list-group text-black">
     <li class="list-group-item"  >
     </li>
     <li class="list-group-item"   >
     </li>
  </ul>
</form>

<div class="nav-item dropdown" >
  <a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
   Click to open dropdown
 </a>
 <form class="dropdown-menu   ">
  <ul class="list-group text-black">
     <li class="list-group-item"  >
     </li>
     <li class="list-group-item"   >
     </li>
  </ul>
</form>

Answer 10

jQuery的:

<script>
  $(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
    e.stopPropagation();
  });
</script>

HTML:

<div class="dropdown keep-inside-clicks-open">
  <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>

演示:

通用:https: //jsfiddle.net/kerryjohnson/omefq68b/1/

您使用此解决方案的演示:http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

Answer 11

我只是添加如下 onclick 事件来不关闭下拉菜单。

 <div class="dropdown-menu dropdown-menu-right" onclick="event.stopPropagation()" aria-labelledby="triggerId">

Answer 12

我修改了@Vartan 的答案，使其适用于 Bootstrap 4.3。他的解决方案不再适用于最新版本，因为无论点击放置在哪里，target属性总是返回下拉列表的根div。

这是代码：

$('.dropdown-keep-open').on('hide.bs.dropdown', function (e) {
  if (!e.clickEvent) {
    // There is no `clickEvent` property in the `e` object when the `button` (or any other trigger) is clicked. 
    // What we usually want to happen in such situations is to hide the dropdown so we let it hide. 
    return true;
  }

  var target = $(e.clickEvent.target);

  return !(target.hasClass('dropdown-keep-open') || target.parents('.dropdown-keep-open').length);
});

<div class="dropdown dropdown-keep-open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Answer 13

$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".show") && e.stopPropagation();
});

Answer 14

引导程序5

如果有人像我一样通过 Google 想要 Bootstrap 5 版本，那么它是通过添加data-bs-auto-close="outside". 请注意，该选项是autoClose，但当作为数据属性传递时，驼峰式大小写将被删除并用破折号分隔。

我在下拉列表中有一个折叠小部件，添加data-bs-auto-close="outside"到父data-bs-toggle="dropdown"触发器使下拉列表在折叠切换时保持打开状态。

请参阅官方 Bootstrap 文档：https://getbootstrap.com/docs/5.1/components/dropdowns/#options 此 codepen 为示例代码（不是我的笔）：https://codepen.io/SitePoint/pen/BaReWGe

Answer 15

我最近遇到了类似的问题，并尝试了不同的方法来解决此问题，方法是删除数据属性data-toggle="dropdown"并click通过event.stopPropagation()调用进行监听。

第二种方法看起来更可取。Bootstrap开发人员也使用这种方式。在源文件中，我发现了dropdown元素的初始化：

// APPLY TO STANDARD DROPDOWN ELEMENTS
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);

因此，此行：

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

建议您可以form使用class 将一个元素放入容器内，.dropdown以避免关闭下拉菜单。

Answer 16

Bootstrap 自己解决了这个问题，因为他们支持<form>下拉菜单中的标签。他们的解决方案很容易理解，你可以在这里阅读：https : //github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js

它归结为防止在文档元素处传播，并且仅针对'click.bs.dropdown.data-api'与选择器匹配的类型的事件执行此操作'.dropdown .your-custom-class-for-keep-open-on-click-elements'。

或者在代码中

$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
    event.stopPropagation();
});

Answer 17

您可以停止单击下拉菜单，然后使用轮播 javascript 方法手动重新实现轮播控件。

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

$('a.left').click(function () {
    $('#carousel').carousel('prev');
});

$('a.right').click(function () {
    $('#carousel').carousel('next');
});

$('ol.carousel-indicators li').click(function (event) {
    var index = $(this).data("slide-to");
    $('#carousel').carousel(index);
});

这是jsfiddle。

Answer 18

例如 Bootstrap 4 Alpha 就有这个菜单事件。为什么不使用？

// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});

Answer 19

您可以简单地event.stopPropagation在链接本身的点击事件上执行。像这样的东西。

    $(".dropdown-menu a").click((event) => {
         event.stopPropagation()
         let url = event.target.href
         //Do something with the url or any other logic you wish
    })

编辑：如果有人看到这个答案并正在使用反应，它将不起作用。React 以不同的方式处理 javascript 事件，当您的 React 事件处理程序被调用时，该事件已经被触发和传播。为了克服这个问题，您应该像这样手动附加事件

handleMenuClick(event) {
   event.stopPropagation()
   let menu_item = event.target
   //implement your logic here.
}
componentDidMount() {
    document.getElementsByClassName("dropdown-menu")[0].addEventListener(
        "click", this.handleMenuClick.bind(this), false)
   }
}

Answer 20

您也可以使用form标签。例子：

<div class="dropdown-menu">
    <form>
        Anything inside this wont close the dropdown!
        <button class="btn btn-primary" type="button" value="Click me!"/>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Clik this and the dropdown will be closed</a>
    <a class="dropdown-item" href="#">This too</a>
</div>

来源：https : //getbootstrap.com/docs/5.0/components/dropdowns/#forms