html - Bootstrap 下拉菜单不会在移动设备上折叠

Question

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

我需要帮助在移动/平板电脑 View 上切换下拉菜单时折叠它。

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

HTML

    <!-- Navigation bar style -->
    <div class="culmn">
        <nav class="navbar navbar-default bootsnav navbar-fixed">
            <div class="navbar-top bg-grey fix">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="navbar-callus text-left sm-text-center">
                                <ul class="list-inline">
                                    <li><a href="tel:123456789"><i class="fa fa-phone"></i>123456789</a></li>
                                    <!--<li><a href="mailto:mailhere@help.com"><i class="fa fa-envelope-o"></i> Contact Us: mailhere@help.com</a></li>-->
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="navbar-socail text-right sm-text-center">
                                <ul class="list-inline">
                                    <li><a target="_blank" href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a target="_blank" href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a target="_blank" href="#"><i class="fa fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Start Search -->
            <div class="top-search">
                <div class="container">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        <!-- <form id="search">
                            <input type="text" class="form-control" placeholder="Search">
                        </form> -->
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-addon close-search"><i class="fa fa-times"></i></span>
                    </div>
                </div>
            </div>
            <!-- End Search -->


            <div class="container">
                <div class="attr-nav">
                    <ul>
                        <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
                    </ul>
                </div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">
                    <div class="title">Logo</div>
                    <div class="sub-title">Logo Sub</div>
                </a>
            </div>

            <div id="navbar2" class="navbar-collapse collapse">
              <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="#about">About Us</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </li>
              </ul>
            </div>
        <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
        </nav>
    </div>
    <!-- End of navigation bar style -->

当在移动/平板设备上切换“此处下拉”时，再次单击时它不会自动关闭。它只是保持打开状态。

有没有办法添加一个切换以确保它在再次选择时关闭？

我是否需要为此功能编写几行 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>