Question

我已经提到了一些文章，我无法弄清楚为什么我的崩溃函数（以及我插入的任何其他js）都无效。我在标题中包含了.js和jquery链接。我还扫描并扫描了我的代码。我将输入我的导航代码，如果需要，提供一个指向整个codepen的链接。

HTML

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sume</title>

    <!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!--font awesome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <!--fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
<!-- Optional theme -->
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>     
  </head>

  <body>    
      <!--nav-->
         <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
        <div class="container">
          <header class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
               <a class="navbar-brand" href="#header">Sume</a>
          </header>
          <div class="collapse navbar-collapse pull-right" id="nav-collapse">
             <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#intro">About</a></li>
              <li><a href="#exp">Experience</a></li>
               <li><a href="#skl">Technical Skills</a></li>
              <li><a href="#img-port">Image Portfolio</a></li>
               <li><a href="#contact">Contact</a></li>             
            </ul>
          </div>
        </div>
      </nav>

的CSS

html, body {
  height:100%;
  width:100%;
}
* {
  font-family: 'Open Sans', sans-serif;
}
a{
  text-decoration:none;
}
.navbar-nav a {
  color: white;
  font-size:125%;

}
.nav a:hover {
  background: transparent !important;
  color:white;
  border-bottom:3px solid white !important;
}
.nav a:focus {
  color:gray;
}
.navbar .navbar-header .navbar-brand {
    color: white;
} 
.navbar {
  background-color:rgb(37,96,155);
  padding-bottom:-1% !important;
}
.icon-bar {
  background-color:white;
}
.navbar .navbar-brand {
  background-color:rgb(37,96,155);
  color:white;
  border: 1px solid white;
  font-weight:lighter;
    -webkit-transition: border .2s ease-in-out;
    -moz-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
.navbar .navbar-brand:hover {
  border-bottom: 3px solid white;
  border-top:none;
  border-left:none;
  border-right:none;
  font-weight: normal;
  -webkit-transition: border .2s ease-in-out;
    -moz-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

Answer 1

你有一个错字。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar collapse">

您的数据目标应与列表的DIV ID匹配（<div class="collapse navbar-collapse pull-right" id="nav-collapse">）。

这应该可以解决问题：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">

Answer 2

你有2个问题。

您需要删除折叠<header>的父标记<button>（它不应该在那里）。
然后，您需要更改data-target属性（<button>）以引用您的可折叠<div>。

<强> HTML

 <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#header">Sume</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse">
          <ul class="nav navbar-nav navbar-right">
           <li class="active"><a href="#intro">About</a></li>
           <li><a href="#exp">Experience</a></li>
           <li><a href="#skl">Technical Skills</a></li>
           <li><a href="#img-port">Image Portfolio</a></li>
           <li><a href="#contact">Contact</a></li>             
         </ul>
       </div>
     </div>
    </nav>

Bootstrap 3导航崩溃无法正常工作

2 个答案: