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

Bootstrap 3 dropdown menu keep show when click any things from the dropdown

本文关键字：下拉菜单 显示 任何内 单击 Bootstrap      更新时间：2023-09-26

我想在单击下拉菜单中的任何位置时保持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>

试试这个

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>

演示

当点击ul中的任何内容时，都可以返回false：

$(function(){
    $("#open").find("ul").on("click", function(){
        return false;
    }); 
});

JSFiddle

相关文章：