Question

我已经尝试了几种方法来关闭下拉列表，但我无法弄明白。

<div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown<span class="caret"></span></a>
            <ul class="dropdown-menu" role='menu'>
                <li><a href="#section1">section1</a></li>
                <li><a href="#section2">section2</a></li>
                <li><a href="#section3">section3</a></li>
            </ul>
        </li>
    </ul>
</div>

css：

.dropdown:hover .dropdown-menu {
display: block;
}

Answer 1

我遇到了同样的问题。解决方案比您想象的更简单。我通过将设置为崩溃的最大宽度从

更改为ipad大小来解决我的问题

@media all and (max-width: 768px) {

到

@media all and (max-width: 767px) {

希望它适合你。

Answer 2

这对我有用：data-toggle="collapse" data-target=".navbar-collapse.in"

这应该通过点击（或触摸）其中一个链接关闭您的下拉列表。

<div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li data-target=".dropdown-menu" data-toggle="dropdown"><a href="#section1">section1</a></li>
                <li data-target=".dropdown-menu" data-toggle="dropdown"><a href="#section2">section2</a></li>
                <li data-target=".dropdown-menu" data-toggle="dropdown"><a href="#section3">section3</a></li>
            </ul>
        </li>
    </ul>
</div>

单击ipad后关闭bootstrap下拉菜单

2 个答案: