Fatal编程技术网

Twitter bootstrap 引导导航栏不会折叠

twitter-bootstrap

Twitter bootstrap 引导导航栏不会折叠,twitter-bootstrap,navbar,Twitter Bootstrap,Navbar,我搜索了很多答案，但没有一个能解决我的问题。这个代码怎么了？单击将打开菜单，但在选择项目时菜单不会关闭，尽管底层内容可以正确滚动 <!DOCTYPE html> <html lang="en"> <head> <title>TEST</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,

我搜索了很多答案，但没有一个能解决我的问题。这个代码怎么了？单击将打开菜单，但在选择项目时菜单不会关闭，尽管底层内容可以正确滚动

<!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>
如果要在触发菜单项时关闭菜单项，则必须创建一个双菜单项，一个可见，一个隐藏

<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时，第一项将隐藏，第二项将显示。 请注意，第二个菜单具有用于菜单的折叠命令

试试看，效果很好

编辑

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

代码运行良好：我遵循了您的链接，但在那里不起作用。我将viewport更改为smartphone并单击菜单，然后任何项目都不会关闭菜单。菜单按预期工作。导航链接的设计目的不是在单击后关闭导航栏。。这个问题的副本是：另一个副本供参考：@ZimSystem谢谢。我重新阅读了这些链接，最终发现解决方案只是在每个标记中添加data toggle=collapse data target=.navbar-collapse.in。这是一个最简单的解决方案，包含了关于此问题的各种帖子中的所有自定义Javascript解决方案。这是可行的，但当在更宽的屏幕上单击导航栏链接时，会导致不必要的闪烁。@ZimSystem在任何大小或分辨率的屏幕上都可以正常工作。@Ken如果它按预期工作，请更新我的答案。