Question

好的，这有点难以解释，但我会尽我所能所以困境是当我点击一个链接时，div会滑出来。但问题是，当它滑出时，底部的两个导航按钮消失，右下方向上滑动。
这可能没有意义。如果您访问我的网站Niu-Niu.org，然后点击“关于Blogger”的导航按钮，您会看到会发生什么。

以下是相关编码：

的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;
}

Answer 1

toggle（）不是你的问题吗？这是导致这些物品消失的原因。

$("div.panel_button").toggle();

Answer 2

当你

 $("div.panel_button").toggle();



<div class="panel_button" style="display: visible;">

正在改为

<div class="panel_button" style="display: none;">

这就是问题

详细了解toggle()

http://api.jquery.com/toggle/

jQuery导航问题

2 个答案: