Bootstrap 3下拉菜单在单击下拉菜单中的任何内容时保持显示

Question

我希望在单击下拉菜单中的任意位置时保持 Bootstrap 3 下拉菜单可见。但是当点击下拉菜单之外的任何地方时它会被隐藏。

<li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Location <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Bangladesh</a></li>
                            <li><a href="#">USA</a></li>
                            <li><a href="#">Canada</a></li>
                            <li><a href="#">Japan</a></li>
                            <li><a href="#">China</a></li>
                        </ul>
                    </li>

Answer 1

试试这个

HTML

<div class="dropdown" id="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>

DEMO

Answer 2

当点击 ul 中的任何内容时，您可以通过返回 false 来做到这一点：

$(function(){
    $("#open").find("ul").on("click", function(){

        return false;

    }); 
});

JSFiddle