0
好的，这将有点难以解释，但我会尽我所能。
所以困境是，当我点击链接时，div滑出。但问题是，当它滑出时，底部的两个导航按钮消失，右下角向上滑动。
这可能没有意义。如果你去我的网站Niu-Niu.org，然后点击“关于Blogger”的导航按钮，你会看到会发生什么。jQuery导航问题
下面是相关代码：
的header.php
<div id="container">
<ul id="navigation1">
<li><a href="http://www.niu-niu.org/">NIU</a></li>
</ul>
<ul id="navigation2">
<li><a href="http://www.spidur.tumblr.com">SKETCH/<br>PHOTO<br>BLOG</a></li>
</ul>
<div class="panel_button" style="display: visible;"><a href="#panel">ABOUT<br>THE<br>BLOGGER</a></div>
<ul id="navigation4">
<li><a href="http://www.niu-niu.org/about">LINKS<br>OUT</a></li>
</ul>
</div>
<div id="toppanel">
<div id="panel">
<div id="panel_contents">
A bunch of panel contents here</div>
<div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">Hide</a> </div>
</div></div>
这里是jQuery的：
$(document).ready(function() {
$("div.panel_button").click(function(){
$("div#panel").animate({
height: "430px"
})
.animate({
height: "400px"
}, "fast");
$("div.panel_button").toggle();
});
$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"
}, "fast");
});
});
这里是CSS：
#container {
position: fixed;
width: 48.1%;
top: 20%;
height: 320px; }
#navigation1 {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 900%;
text-align: center;
}
#navigation1 a {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: #F58932;
color: #F5ECE6;
display: block;
width: 50%;
height: 160;
text-decoration: none;
}
#navigation1 a:hover {
background: #2D2611;
color: #FFFFFF;
text-decoration: none;
}
#navigation2 {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 255%;
}
#navigation2 a {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: #F59A51;
color: #F5D5C0;
display: block;
width: 50%;
height: 160px;
position: relative;
left:50%;
top: -160px;
text-decoration: none;
}
#navigation2 a:hover {
background: #2D2611;
color: #FFFFFF;
text-decoration: none;
}
#navigation3 {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 255%;
}
#navigation3 a {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
width: 50%;
height: 160px;
position: relative;
top: -160px;
text-decoration: none;
}
#navigation3 a:hover {
background: #2D2611;
color: #FFFFFF;
text-decoration: none;
}
#navigation4{
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 360%;
}
#navigation4 a {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: #F5AD72;
color: #F5C4A4;
display: block;
width: 50%;
height: 160px;
position: relative;
left:50%;
top: -320px;
text-decoration: none;
}
#navigation4 a:hover {
background: #2D2611;
color: #FFFFFF;
text-decoration: none;
}
#wrap {
width: 100%;
height: 100%; }
.panel_button1 {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 255%;
background-color: #fff;
}
.panel_button {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 255%;
}
.panel_button a {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
width: 50%;
height: 160px;
position: relative;
top: -160px;
text-decoration: none;
}
.panel_button a:hover {
background: #808080;
color: #FFFFFF;
}
#toppanel {
margin-top: 0px;
margin-left: 48%;
position: absolute;
width: 48%;
left: 0px;
z-index: 25;
text-align: center;
}
#panel {
width: 100%;
position: relative;
top: 1px;
height: 0px;
margin-left: auto;
margin-right: auto;
z-index: 10;
overflow: hidden;
text-align: left;
}
#panel_contents {
background: #fff;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}