从Bootstrap dropdown文档的事件部分：

hide.bs.dropdown: 调用隐藏实例方法时立即触发此事件。

对于初学者来说，为了防止下拉菜单关闭，我们可以只监听这个事件并通过返回来阻止它继续false：

$('#myDropdown').on('hide.bs.dropdown', function () {
    return false;
});

对于完整的解决方案，您可能希望在单击下拉菜单时关闭它。所以只有在某些时候我们会想要阻止盒子关闭。

为此，我们将.data()在下拉列表引发的另外两个事件中设置标志：

• shown.bs.dropdown- 显示时，我们将设置.data('closable')为false
• click- 点击后，我们将设置.data('closable')为true

因此，如果hide.bs.dropdown事件是由click下拉列表中的 a 引发的，我们将允许关闭。

jsFiddle 中的现场演示

JavaScript

$('.dropdown.keep-open').on({
    "shown.bs.dropdown": function() { this.closable = false; },
    "click":             function() { this.closable = true; },
    "hide.bs.dropdown":  function() { return this.closable; }
});

HTML （注意我已将类添加keep-open到下拉列表中）

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#" class="btn btn-primary"
            data-toggle="dropdown" data-target="#" >
        Dropdown <span class="caret"></span>
    </button>

    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

某些依赖项中的版本更改导致 KyleMit 和大多数其他解决方案不再有效。我深入研究了一下，出于某种原因，click()当 Bootstrap 尝试并失败时会发送a hide.bs.dropdown，然后是另一个调用hide.bs.dropdown. 我通过强制关闭click()按钮本身而不是整个下拉菜单来解决这个问题。

Bootply 中的现场演示

JavaScript

$('.keep-open').on({
    "shown.bs.dropdown": function() { $(this).attr('closable', false); },
    //"click":             function() { }, // For some reason a click() is sent when Bootstrap tries and fails hide.bs.dropdown
    "hide.bs.dropdown":  function() { return $(this).attr('closable') == 'true'; }
});

$('.keep-open').children().first().on({
  "click": function() {
    $(this).parent().attr('closable', true );
  }
})

HTML

<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#" data-toggle="dropdown" data-target="#" class="btn btn-primary">
        Dropdown <span class="caret"></span>
    </button>
    
    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

我找到了一个不需要新js的解决方案。不要使用下拉菜单，而是使用引导程序折叠。我仍然使用一些下拉类将其设置为下拉样式。

<div class="dropdown">
    <button class="dropdown-toggle" type="button" data-toggle="collapse" data-target="#myList">Drop Down
    <span class="caret"></span></button>
    <div id="myList" class="dropdown-menu">
        <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
        <input type="checkbox" name="vehicle" value="Car"> I have a car<br></div>

我设法结合使用上面的 KyleMitt 解决方案，并在 Footable 对象中使用它时遇到了问题（我相信这是由于表格的动态创建）。我将 .keep-open 应用于顶层的 .dropdown .div 。

$('#contact_table').on("click", '.keep-open', function () {
    this.closable = false;
});

$('#contact_table').on("shown.bs.dropdown", '.keep-open', function () {
    this.closable = true;
});
$('#contact_table').on("hide.bs.dropdown", '.keep-open', function () {
    let ret = this.closable;
    this.closable = true;
    return ret;
});

此代码的功能允许您单击外部以关闭下拉列表，但单击其中的项目将使其保持打开状态。如果您对此有任何建议/意见，请告诉我，我会尝试进行编辑。