Question

我搜索过并找到了很多回复，但没有一个能解决我的问题。这段代码出了什么问题？单击将打开菜单，但选择项目时菜单不会关闭，尽管基础内容滚动正确。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TEST</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        section {padding-top: 50; padding-bottom: 100px; margin-top: 50px}
    </style>}
</head>
<body id="page_top" data-spy="scroll" data-target=".navbar" data-offset="50">
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page_top">LOGO</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
               <li><a class="page-scroll" href="#support">Support</a></li>
               <li><a class="page-scroll" href="#training">Training</a></li>
               <li><a class="page-scroll" href="#about">About</a></li>
               <li><a class="page-scroll" href="#rates">Hours &amp; Rates</a></li>
               <li><a class="page-scroll" href="#contact">Contact</a></li>
            </ul>
         </div>
      </div>
   </nav>
   <header>Content for New header Tag Goes Here</header>
   <section id="support">Content for  id "support" Goes Here</section>
   <section id="training">Content for  id "training" Goes Here</section>
   <section id="about">Content for  id "about" Goes Here</section>
   <section id="rates">Content for  id "rates" Goes Here</section>
   <section id="contact">Content for  id "contact" Goes Here</section>
<footer>
   <p>
        &copy;2017 
    </p>
</footer>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</body>
</html>

Answer 1

如果您希望项目菜单在触发时关闭菜单，则必须创建一个双重菜单，一个可见，一个隐藏。

<li><a class="page-scroll hidden-xs" href="#support">Support</a></li>
<li><a class="page-scroll visible-xs" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#support">Support</a></li>

第一个将正常运作。

当你去XS时，第一个项目被隐藏，第二个项目被显示。请注意，第二个命令具有菜单的COLLAPSE命令。

试试吧，工作正常！

<强> EDITED

您也可以通过JavaScript实现这一目标，但这是最简单的方法。

Bootstrap导航栏不会崩溃

1 个答案: