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

这可以归结为在文档元素上阻止传播，并且只对click.bs.dropdown类型的事件这样做。Data-api '匹配选择器'。下拉.your-custom-class-for-keep-open-on-click-elements”。

或者在代码中

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

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

这可以归结为在文档元素上阻止传播，并且只对click.bs.dropdown类型的事件这样做。Data-api '匹配选择器'。下拉.your-custom-class-for-keep-open-on-click-elements”。

或者在代码中

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

我知道这个问题是专门针对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
          });
        }
    };
});

然后，只需在触发菜单关闭的元素上添加属性下拉-防止-关闭，它就应该会阻止关闭。对我来说，它是一个自动关闭菜单的选择元素:

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

您可以简单地执行事件。链接本身的点击事件的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，它将无法工作。 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)
   }
}

$(function() {
    $('.mega-dropdown').on('hide.bs.dropdown', function(e) {
        var $target = $(e.target);
        return !($target.hasClass("keep-open") || $target.parents(".keep-open").size() > 0);
    });

    $('.mega-dropdown > ul.dropdown-menu').on('mouseenter', function() {
        $(this).parent('li').addClass('keep-open')
    }).on('mouseleave', function() {
        $(this).parent('li').removeClass('keep-open')
    });
});

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.clickEvent.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
    }else{
        return true;
    }
});