单击里面时保持Bootstrap下拉打开
我有一个bootstrap下拉菜单。 我希望它在我点击它时保持打开状态 ，但在单击下拉切换按钮或菜单外部时关闭。
当我在input时，下拉列表似乎没有关闭，但当我点击下拉列表中的任何其他位置时，它会关闭。
问：如何通过使用jQuery来避免这种情况？
以下是我的HTML ：
Bootply中的演示
您可以使用以下JavaScript手动打开和关闭下拉菜单：
$(function() { $('.dropdown-toggle').on('click', function(event) { $('.dropdown-menu').slideToggle(); event.stopPropagation(); }); $('.dropdown-menu').on('click', function(event) { event.stopPropagation(); }); $(window).on('click', function() { $('.dropdown-menu').slideUp(); }); });
StackSnippets中的演示
$(function() { $('.dropdown-toggle').on('click', function(event) { $('.dropdown-menu').slideToggle(); event.stopPropagation(); }); $('.dropdown-menu').on('click', function(event) { event.stopPropagation(); }); $(window).on('click', function() { $('.dropdown-menu').slideUp(); }); });
从单击里面的关闭避免下拉菜单的问题，你可以简单地从下拉列表中停止传播，如下所示：
$(document).on('click', '.allow-focus .dropdown-menu', function (e) { e.stopPropagation(); });
Stack Snipets中的演示
$(document).on('click', '.allow-focus .dropdown-menu', function (e) { e.stopPropagation(); });