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;

    }); 
});

从下拉列表中点击任何内容时，Bootstrap 3下拉菜单会一直显示

2 个答案:

JSFiddle