Javascript 避免在单击“内部”时关闭下拉菜单

我有一个推特引导下拉菜单。正如所有Twitter引导用户所知道的，下拉菜单在单击时关闭（甚至在其内部单击）

为了避免这种情况，我可以很容易地在下拉菜单上附加一个click事件处理程序，只需添加著名的

event.stopPropagation（）

基于以下原因，依靠Twitter引导下拉菜单隐藏事件不是解决方案：

• 为这两个事件处理程序提供的事件对象不引用单击的元素
• 我无法控制下拉菜单内容，因此无法添加

  标志

  类或属性

是正常行为，添加了

event.stopPropagation（）

更新 感谢罗曼的帮助。我还找到了一个。

---

删除数据属性

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

然后聆听下拉列表外部的单击，将其关闭，如下所示：

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

以下是演示：

---

您可以停止单击下拉列表以防止传播，然后使用手动重新实现旋转木马控件

这是你的电话号码

• 演示：

---

我再次更新了它，使其尽可能的智能化和功能化。现在，当您在导航舱外悬停时，它将关闭，当您在导航舱内时，它将保持打开状态。简直太完美了。

我也找到了解决办法

假设

Twitter引导组件

相关事件处理程序被委托给

文档

对象，我循环附加的处理程序并检查当前单击的元素（或其父元素之一）是否与委托事件有关

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

$（'ul.dropdown menu.mega dropdown menu'）。打开（'click'，函数（事件）{
var事件=$。_数据（文档“事件”）|{}；
事件=事件。单击| |[]；
对于（var i=0；i

希望它能帮助任何寻求类似解决方案的人

---

谢谢大家的帮助。

这也应该有帮助

$（文档）。在（'click'，'someyourcainer.dropdown menu'，函数（e）{
e、 停止传播（）；
});

我最近遇到了一个类似的问题，并尝试了不同的方法来解决它，方法是删除数据属性

data toggle=“dropdown”

并通过调用

event.stopPropagation（）

来监听

单击

第二种方法看起来更可取。引导开发人员也使用这种方式。
在源文件中，我找到了下拉列表元素的初始化：

// 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() })

建议您可以使用class
.dropdown在容器中放置
表单
元素，以避免关闭下拉菜单。
最佳答案是在class下拉菜单后放置表单标记

所以你的代码是

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



呜呜呜呜


例如，Bootstrap 4 Alpha具有此菜单事件。为什么不使用

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

我知道这个问题是专门针对jQuery的，但是对于任何使用AngularJS的人来说，如果有这个问题，你可以创建一个指令来处理这个问题：

angular.module('app').directive('dropdownPreventClose', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function(e) {
            e.stopPropagation(); //prevent the default behavior of closing the dropdown-menu
          });
        }
    };
});

然后只需在触发菜单关闭的元素中添加属性
下拉列表prevent close
，它应该会阻止它。对我来说，是一个
select
元素自动关闭了菜单：

<div class="dropdown-menu">
  <select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
    <option value="">Select Me</option>
  </select>
</div>


选择我
对我来说，最简单的工作解决方案是：


将
保持打开
类添加到不应导致下拉关闭的元素
这段代码完成了剩下的工作：

$（'.dropdown'）。在（'click'，函数（e）上{
var目标=$（e.target）；
var dropdown=target.closest（'.dropdown'）；
return！dropdown.hasClass（'open'）| |！target.hasClass（'keep-open'）；
});
通过Angular2引导，您可以在大多数情况下使用非输入：

<div dropdown autoClose="nonInput">



只要单击的元素不是输入或文本区域，nonInput-（默认值）会在单击其任何元素时自动关闭下拉列表


这可能适用于任何条件。
我发现没有一种解决方案能够像我希望使用默认引导nav那样工作。
以下是我对这个问题的解决方案：

       $(document).on('hide.bs.dropdown', function (e) {
        if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
          $(e.relatedTarget).parent().removeClass('open');
          return true;
        }
        return false;
       });

[bootstrap4alpha6][Rails]
对于rails开发者来说，
e.stopPropagation（）
将导致
link\u to
使用
数据方法
不等于
get
的不良行为，因为默认情况下它将以
get
的形式返回您的所有请求

为了解决这个问题，我建议这个解决方案，它是通用的

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});


$（'.dropdown.dropdown menu'）。on（'click.bs.dropdown'，function（））{
返回$（'.dropdown'）.one（'hide.bs.dropdown'，function（））{
返回false；
});
});







<
<div class="dropdown-menu">
  <select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
    <option value="">Select Me</option>
  </select>
</div>

<div dropdown autoClose="nonInput">

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

       $(document).on('hide.bs.dropdown', function (e) {
        if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
          $(e.relatedTarget).parent().removeClass('open');
          return true;
        }
        return false;
       });

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});

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

<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>

uib-dropdown auto-close="disabled" 

$('.dropdown').on('click', function (e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    if (target.hasClass('keep-open')) {
        $(dropdown).addClass('keep-open');
    } else {
        $(dropdown).removeClass('keep-open');
    }
});

$(document).on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if ($(target).is('.keep-open')) {
        return false
    }
});

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

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

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

$('.dropdown-menu').on('click', function (e) {
     if ($(this).parent().is(".open")) {
         var target = $(e.target);
         if (target.hasClass("keepopen") || target.parents(".keepopen").length){
                    return false; 
                }else{
                    return true;
                }
            }            
});

<ul role="menu" class="dropdown-menu topmenu-menu eserv_top_notifications keepopen">

<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>

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

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)
   }
}

<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>

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