Bootstrap 3：可折叠导航不会关闭答案

【问题标题】：Bootstrap 3: Collapsible nav won't closeBootstrap 3：可折叠导航不会关闭
【发布时间】：2015-06-11 10:55:04
【问题描述】：

我使用 Bootstrap 3 作为我的个人网站的框架，我必须为我的研究生课程编写代码。目前，我正在使用 Insite Design Lab 教程代码中的单页网站平滑滚动代码：http://www.insitedesignlab.com/how-to-make-a-single-page-website/。

我的可折叠菜单无法在较小的屏幕上折叠。这是我的代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <link href='http://fonts.googleapis.com/css?family=Oswald|Lato|Roboto+Slab' rel='stylesheet' type='text/css'>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap & Fonts-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="js/respond.js"></script>
</head>

<body>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!--Body -->
    <div id="container">
        <!--Test Nav from Lynda.com Tutorial -->
            <!-- Row 1: navigation -->
            <div class="row">
                <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse" id="collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#home">Home</a></li>
                            <li><a href="#portfolio">Portfolio</a></li>
                            <li><a href="#resume">Résumé</a></li>
                            <li><a href="#connect">Connect</a></li>  
                        </ul>
                    </div>
                </nav>
            </div>  
    </div><!-- Container End -->

<!-- Insite Design Lab Tutorial Code: http://www.insitedesignlab.com/how-to-make-a-single-page-website/-->              
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
                        $(".contactLink").click(function(){
                            if ($("#contactForm").is(":hidden")){
                                $("#contactForm").slideDown("slow");
                            }
                            else{
                                $("#contactForm").slideUp("slow");
                            }
                        });
                    });
                    function closeForm(){
                        $("#messageSent").show("slow");
                        setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
                   }

        $(document).ready(function() {
          function filterPath(string) {
            return string
              .replace(/^\//,'')
              .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
              .replace(/\/$/,'');
          }
          $('a[href*=#]').each(function() {
            if ( filterPath(location.pathname) == filterPath(this.pathname)
            && location.hostname == this.hostname
            && this.hash.replace(/#/,'') ) {
              var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
              var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
               if ($target) {
                 var targetOffset = $target.offset().top -10;
                 $(this).click(function() {
                   $('html, body').animate({scrollTop: targetOffset}, 1000);
                   var d = document.createElement("div");
                d.style.height = "101%";
                d.style.overflow = "hidden";
                document.body.appendChild(d);
                window.scrollTo(0,scrollToM);
                setTimeout(function() {
                d.parentNode.removeChild(d);
                    }, 10);
                   return false;
                 });
              }
            }
          });
        });
        /*! Smooth Scroll - v1.4.5 - 2012-07-22
        * Copyright (c) 2012 Karl Swedberg; Licensed MIT, GPL */
        </script>

</body>
<!-- Body End -->

我删除了网站上的大部分实际页面，但我留下了头部、导航和脚本信息。我网站的链接是http://www.auburn.edu/~tbd0011

我似乎也不知道如何设置将填满整个屏幕的页面高度，我也无法更改手风琴面板的颜色。

提前感谢您的帮助！

【问题讨论】：

小屏幕是什么意思？您是否使用了任何可能干扰的媒体查询？
我没有使用任何超出 Bootstrap 框架原生列限制的媒体查询（并且我没有为中屏幕添加任何媒体查询。）通过较小的屏幕，我指的是手机和平板电脑大小的屏幕。这些屏幕要求粘性顶部导航栏折叠成带有菜单链接的汉堡包/3 行图标。
你包含了 jQuery 两次。尝试消除其中一个。
@tbd0011：试试我们关于消除双重脚本的建议（不仅仅是你在我的回答中看到的 jQuery），这可能是问题所在。
谢谢大家！回复较晚，抱歉。今晚我将尝试您的建议，我会尽快报告。再次感谢！

标签： css html twitter-bootstrap-3 navbar collapse

【解决方案1】：

我的可折叠菜单无法在较小的屏幕上折叠。

它在最新的 Firefox 中运行良好，当我尝试在打开后关闭折叠菜单时出现问题。

我肯定会从清理代码开始 - 在 head 中，您加载这两个脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

然后在 <body> 之后从不同来源再次加载它们。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>

选择其中之一，不要将所有内容加载两次。

此外，respond.js 应仅在 IE 8 及更早版本（连同 HTML5shiv）中加载，请参阅 Bootstrap docs。

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

我似乎也不知道如何设置页面高度填满整个屏幕，我也无法更改面板的颜色在我的手风琴里。

页面高度应设置为自动，因为它应该与内容一样高。

至于手风琴，我不知道您指的是哪个手风琴，但这是一个简单的 CSS 问题，您可以通过更高的 CSS 规范或 !important 来解决。

【讨论】：

【解决方案2】：

我的可折叠菜单无法在较小的屏幕上折叠。

我不确定这是否是您想要的，但您可以将此代码添加到您的脚本中：

 $('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
  if($(window).width()<768){
    $(".navbar-collapse").collapse('hide');
  }
});

它应该在较小的屏幕上折叠导航栏。

【讨论】：