我引用了很多文章，但我无法弄清楚为什么我的折叠功能(以及我插入的任何其他 js)不起作用。我在标题中包含了 .js 和 jquery 链接。我也扫描并扫描了我的代码。我将输入我的导航代码，并在需要时提供整个代码笔的链接。
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;
}
最佳答案
您有一个拼写错误。
<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">
关于javascript - Bootstrap 3 导航折叠不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26893113/