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

Question

我正在使用 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 -->

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

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

在此先感谢您的帮助！

Answer 1

I can't get my collapsible menu to collapse on smaller screen.

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

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

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

Answer 2

I can't get my collapsible menu to collapse on smaller screen.

它在最新的 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]-->

I also can't seem to figure out how to set a page height that will fill the entire screen and I also can't change the color of the panels in my accordion.

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

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

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

Bootstrap 3: Collapsible nav won't close

css

html

twitter-bootstrap-3

navbar

collapse