刚刚学习 Bootstrap，我在网上找到了一个主题，在处理导航栏时，发现切换按钮在打开后不会切换回关闭状态。我做了很多搜索，但很难找到任何可以帮助我的东西……附件是我正在处理的代码。感谢您提供任何帮助。
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>CardSpoiler</title>
<meta name="description" content="BlackTie.co - Free Handsome Bootstrap Themes" />
<meta name="keywords" content="themes, bootstrap, free, templates, bootstrap 3, freebie,">
<meta property="og:title" content="">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
</head>
<style>
body {
background: #232526;
background: -webkit-linear-gradient(to right, #232526 , #414345);
background: linear-gradient(to right, #232526 , #414345);
margin: 0em;
vertical-align: middle;
}
li { cursor: pointer; cursor: hand; }
.navbar-toggle{
background-color: #232526;
}
</style>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-1"><a id="home" title="Home"><span class="icon icon-home"></span> <span class="text">Home</span></a></li>
<li data-slide="2" class="col-12 col-sm-1"><a id="warrior" title="Warrior" class="external nav"><span class="icon icon-filter"></span> <span class="text">Warrior</span></a></li>
<li data-slide="3" class="col-12 col-sm-1"><a id="druid" href="../../../CardSpoiler.html" title="Druid"><span class="icon icon-leaf"></span> <span class="text">Druid</span></a></li>
<li data-slide="4" class="col-12 col-sm-1"><a id="priest" href="../../../CardSpoiler.html" title="Priest"><span class="icon icon-plus-sign"></span> <span class="text">Priest</span></a></li>
<li data-slide="5" class="col-12 col-sm-1"><a id="paladin" href="../../../CardSpoiler.html" title="Paladin"><span class="icon icon-heart"></span> <span class="text">Paladin</span></a></li>
<li data-slide="6" class="col-12 col-sm-1"><a id="hunter" href="../../../CardSpoiler.html" title="Hunter"><span class="icon icon-screenshot"></span> <span class="text">Hunter</span></a></li>
<li data-slide="1" class="col-12 col-sm-1"><a id="mage" href="../../../CardSpoiler.html" title="Mage"><span class="icon icon-fire"></span> <span class="text">Mage</span></a></li>
<li data-slide="2" class="col-12 col-sm-1"><a id="shaman" href="../../../CardSpoiler.html" title="Shaman"><span class="icon icon-tint"></span> <span class="text">Shaman</span></a></li>
<li data-slide="3" class="col-12 col-sm-1"><a id="warlock" href="../../../CardSpoiler.html" title="Warlock"><span class="icon icon-user"></span> <span class="text">Warlock</span></a></li>
<li data-slide="4" class="col-12 col-sm-1"><a id="rogue" href="../../../CardSpoiler.html" title="Rogue"><span class="icon icon-eye-close"></span> <span class="text">Rogue</span></a></li>
<li data-slide="5" class="col-12 col-sm-1"><a id="minions" href="../../../CardSpoiler.html" title="Minions"><span class="icon icon-chevron-up"></span> <span class="text">Minions</span></a></li>
<li data-slide="6" class="col-12 col-sm-1"><a id="spells" href="../../../CardSpoiler.html" title="Spells"><span class="icon icon-chevron-down"></span> <span class="text">Spells</span></a></li>
</ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</body>
<!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<!-- fancybox init -->
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
document.getElementById("home").onclick = function () {
location.href = "../../../CardSpoiler.html";
};
document.getElementById("warrior").onclick = function () {
location.href = "../../../CardSpoiler_Warrior.html";
};
document.getElementById("druid").onclick = function () {
location.href = "../../../CardSpoiler_Druid.html";
};
document.getElementById("priest").onclick = function () {
location.href = "../../../CardSpoiler_Priest.html";
};
document.getElementById("paladin").onclick = function () {
location.href = "../../../CardSpoiler_Paladin.html";
};
document.getElementById("hunter").onclick = function () {
location.href = "../../../CardSpoiler_Hunter.html";
};
document.getElementById("mage").onclick = function () {
location.href = "../../../CardSpoiler_Mage.html";
};
document.getElementById("shaman").onclick = function () {
location.href = "../../../CardSpoiler_Shaman.html";
};
document.getElementById("warlock").onclick = function () {
location.href = "../../../CardSpoiler_Warlock.html";
};
document.getElementById("rogue").onclick = function () {
location.href = "../../../CardSpoiler_Rogue.html";
};
document.getElementById("minions").onclick = function () {
location.href = "../../../CardSpoiler_MSOG_Minions.html";
};
document.getElementById("spells").onclick = function () {
location.href = "../../../CardSpoiler_MSOG_Spells.html";
};
</script>
</html>
最佳答案
问题出在 .navbar-toggle 的 z-index 上。列表项有更大的 z-index，而 .navbar-toggle 没有。将此添加到您的 CSS 将起作用:
.navbar-toggle {
z-index: 5;
}
尝试使用 Working JSBin .
要将它与您拥有的原始代码进行比较，请参阅 Old Code .
关于javascript - 打开后关闭切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41317955/