Question

我正在尝试使用Bootstrap创建响应式菜单。

在手机/平板电脑视图上切换下拉菜单时，我需要帮助才能将其下拉。

目前它只切换菜单打开但不知道何时关闭它。

HTML

clearCheck()

在移动设备/平板电脑设备上切换“此处下拉”时，再次点击时它不会自动关闭。它只是保持开放。

有没有办法添加一个切换按钮以确保它再次被选中时关闭？

我是否可能必须为此功能编写几行jQuery，或者是否可以直接从Bootstrap完成它？

Answer 1

您似乎错过了nav标记来包装所有内容。在打开/关闭部分时，您需要在要使用的元素中使用navbar-toggler类来打开或折叠带有+另一个div的导航栏。

应该是这样的：

<nav class="navbar navbar-expand-lg navbar-light navbar-fluid" id="navbar">

    <a class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
        aria-expanded="false" aria-label="Toggle navigation">
        <p>Dropdown here</p>
    </a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div id="navbar2" class="navbar-nav">

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
                </li>
                <li>
                    <a data-toggle="collapse" data-target=".navbar-collapse" href="#features">Features</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown here</a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="one.html">One</a>
                        </li>
                        <li>
                            <a href="two.html">Two</a>
                        </li>
                        <li>
                            <a href="three.html">Three</a>
                        </li>
                        <li>
                            <a href="four.html">Four</a>
                        </li>
                        <li>
                            <a href="five.html">Five</a>
                        </li>
                        <li>
                            <a href="six.html">Six</a>
                        </li>
                        <li>
                            <a href="seven.html">Seven</a>
                        </li>
                        <li>
                            <a href="eight.html">Eight</a>
                        </li>
                    </ul>
                    <li>
                        <a data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a>
                    </li>
                    <li>
                        <a href="nine.html">Other</a>
                    </li>
                </li>
            </ul>
        </div>
    </div>
</nav>

Bootstrap下拉列表在移动设备上不会崩溃

1 个答案: