而不是写一些javascript或jquery代码(重新发明轮子)。上面的场景可以通过引导自动关闭选项来管理。 你可以提供任意一个值来自动关闭:

always -(默认值)在点击任何元素时自动关闭下拉菜单。 outeclick -仅当用户单击下拉框外的任何元素时自动关闭下拉框。 Disabled -禁用自动关闭

看看下面的plunkr:

http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview

Set

uib-dropdown auto-close="disabled" 

希望这对你有所帮助。

我是这样做的:

$(element).on({
    'mouseenter': function(event) {
        $(event.currentTarget).data('mouseover', true);
    },
    'mouseleave': function(event) {
        $(event.currentTarget).data('mouseover', false);
    },
    'hide.bs.dropdown': function (event) {
        return !$(event.currentTarget).data('mouseover');
    }
});

你需要添加“按住-点击”到“下拉菜单”类

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

如果使用return false或stopPropagation()方法，您可能会遇到一些问题，因为您的事件将被中断。 试试这段代码，它的工作很好:

$(function() {
    $('.dropdown').on("click", function (e) {
            $('.keep-open').removeClass("show");
    });
    $('.dropdown-toggle').on("click", function () {
            $('.keep-open').addClass("show");
    });

    $( ".closeDropdown" ).click(function() {
        $('.dropdown').closeDropdown();
    });
});
jQuery.fn.extend({
    closeDropdown: function() {
        this.addClass('show')
            .removeClass("keep-open")
            .click()
            .addClass("keep-open");
    }
  });

在HTML中:

<div class="dropdown keep-open" id="search-menu" >
    <button  class="btn dropdown-toggle btn  btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-filter fa-fw"></i> 
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item" id="opt1" type="button">Option 1</button>
        <button class="dropdown-item" id="opt2" type="button">Option 2</button>
        <button type="button" class="btn btn-primary closeDropdown">Close</button>
    </div>
</div>

如果你想关闭dropdrown:

`$('#search-menu').closeDropdown();`

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