0
我做了一個頁面，在單擊按鈕時，我想要顯示或隱藏引導程序導航欄。如何在不移動其他div的情況下隱藏bootstrap導航欄？
但是，當我點擊按鈕，整個「內容」股利上移。我試圖設置一個z-index但它仍然沒有工作。
這裏是我的代碼：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
body {
background: url(img/background.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span1"></div>
<div class="span10">
<div class="navbar" >
<div id="navbar">
<div class="navbar-inner pull-center" >
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Rules</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Requirements</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
<center><button id="btx" class="btn" style="margin:0;" onclick="showhide('navbar','btx','hide','show')" >MENU</button></center>
</div>
<div class="span1"> </div>
<div id="content" class="span8 pagination-centered">
<img src="img/final2.gif" class="img-rounded" style="text-align: center;"/>
</div>
<div class="span1"></div>
</div>
<div class="span1"></div>
</div>
</div>
<script>
function showhide(targetElementId,thisId,newName,oldName){
var thisElement = document.getElementById(thisId);
$("#"+targetElementId).slideToggle("slow");
if(targetElement.style.display!='none'){
thisElement.value=oldName;
}
else{
thisElement.value=newName;
}
}
</script>
</body>
</html>