bootstrap 3.0.2 navbar navbar-collapse自动关闭所有点击和触摸

Question

我正在开发一个主要面向手机的网站，因此我已经实现了内置的bootstrap navbar-fixed-top，其中hide / show toggle可以在手机上显示。

我的菜单页面上的问题我在菜单中使用锚点链接跳转到页面上的某些部分。单击锚点链接时，下拉菜单会自动关闭，但主导航栏不会关闭。

我想要它，以便当点击下拉列表中的任何链接时，整个菜单都会关闭。

此时，在下拉列表的菜单部分下单击其中一个锚点链接时，只能点击一个链接，当点击另一个链接时，在用户刷新页面之前不会发生任何事情。

 <!-- Fixed navbar -->
    <div class = "navbar navbar-default navbar-fixed-top auto " >
    <div class = "container">

    <a href = "index.html" class = "navbar-brand">Brand Name</a>

    <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
    <span class = "icon-bar"></span>
    <span class = "icon-bar"></span>
    <span class = "icon-bar"></span>
    </button>
    <!-- dropdown navbar for mobile -->
    <div class = "collapse navbar-collapse navHeaderCollapse auto ">

                        <ul class = "nav navbar-nav navbar-right auto">

                            <li ><a href = "index.html">Home</a></li>


                               <li class = "dropdown">
                             <a href = "Menu.html" class = "dropdown-toggle" data-toggle = "dropdown" class = "active">Menu<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a id ="menudrp" href = "Menu.html">Menu</a></li>
                                    <li class="divider"></li>
                                    <li><a id= "indianstartersdrp" href = "#Indian-Starters">Indian Starters</a></li>
                                    <li><a href = "#Mexican-Starters">Mexican Starters</a></li>
                                    <li><a href = "#Thai-Starters">Thai Starters</a></li>
                                    <li><a href = "#Indian-Main">Indian Main</a></li>                                                              
                                    <li><a href = "#Mexican-Main">Mexican Main</a></li>
                                    <li><a href = "#Thai-Main">Thai Main</a></li>
                                    <li><a href = "#Indian-Desserts">Indian Desserts</a></li>
                                    <li><a href = "#Mexican-Desserts">Mexican Desserts</a></li>
                                    <li><a href = "#Thai-Desserts">Thai Desserts</a></li>

                                </ul>
                                 </li>                     


                            <li class = "dropdown">
                             <a href = "Events.html" class = "dropdown-toggle" data-toggle = "dropdown">Events<b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "Events.html#corporate">Corporate Events Catering</a></li>
                                    <li><a href = "Events.html#wedding">Wedding Events Catering </a></li>
                                </ul>
                                 </li>

                            <li><a href = "gallery.html">Gallery</a></li>
                            <li class = "dropdown">

                                <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>
                                <ul class = "dropdown-menu">
                                    <li><a href = "#">Twitter</a></li>
                                    <li><a href = "#">Facebook</a></li>
                                    <li><a href = "#">Google+</a></li>
                                    <li><a href = "#">Instagram</a></li>
                                </ul>
                            </li>
                            <li><a href = "AboutUs.html">About</a></li>
                            <li><a href = "#myModal" data-toggle="modal">Contact</a></li>

                        </ul>

                    </div>

    </div>
    </div>