引导5

如果有人通过谷歌来到这里，想要一个像我一样的Bootstrap 5版本，它是通过添加data-b -auto-close="outside"而内置的。注意，该选项是autoClose，但当作为数据属性传递时，驼峰字体被删除并由破折号分隔。

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

查看官方引导文档:https://getbootstrap.com/docs/5.1/components/dropdowns/#options 这个代码依赖于示例代码(不是我的笔):https://codepen.io/SitePoint/pen/BaReWGe

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

我最近遇到了类似的问题，并尝试了不同的方法来解决它，删除数据属性data-toggle="下拉"和监听点击事件. stoppropagation()调用。

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

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

建议您可以在容器中使用类.dropdown放置表单元素，以避免关闭下拉菜单。

对我来说，最简单的解决方案是:

将keep-open类添加到不会导致下拉关闭的元素中 下面这段代码完成剩下的工作:

$('.dropdown').on('click', function(e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});

对于关闭下拉菜单，只有当点击事件在引导下拉菜单之外被触发时，这对我来说是有效的:

JS文件:

    $('.createNewElement').on('click.bs.dropdown.data-api', '.tags-btn-group.keep-open-dropdown', function (e) {
        var target = $(e.target);
        if (target.hasClass("dropdown-menu") || target.parents(".dropdown-menu").length) {
            e.stopPropagation();
        }
    });

HTML文件:

<!-- button: -->
<div class="createNewElement">
                <div class="btn-group tags-btn-group keep-open-dropdown">

                    <div class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">OPEN DROPDOWN</div>

                    <ul class="dropdown-menu">
                        WHAT EVER YOU WANT HERE...
                    </ul>

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