單擊ipad后關閉bootstrap下拉菜單

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" ： 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>