Question

好的，所以我要做的就是让用户点击一个链接并让一个盒子向下滑动到顶部。
我做了主要的事情，但盒子似乎有点奇怪。如果单击指定的框（在本例中为“关于Blogger”），则框会向下滑动。然后，如果您单击导航下方区域中的任意位置，该框也会向下滑动。我怎么阻止这个？
相关编码：

CSS：

.panel_button {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;

}

.panel_button a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
position: relative;
top: -160px;
font-size: 255%;
width: 50%;
height: 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: 700px;
width: 100%;
position: absolute;
z-index: -1;
}

的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">and jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhere </div> 
  <div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">Hide</a> </div> 
</div></div>

老实说，我怀疑这是jQuery问题，但我不熟悉jQuery，为什么不呢：

$(document).ready(function() {
    $("div.panel_button").click(function(){
        $("div#panel").animate({
            height: "430px"
        })
        .animate({
            height: "400px"
        }, "fast");


    }); 

   $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        }, "fast");


   });  


});

如果您想查看，我的网站位于Niu-Niu.org。

谢谢你的期待！

Answer 1

因为它也是div.panel_button。你应该在jQuery中重新定义你的选择器。

Answer 2

使用实际的锚元素来触发动画而不是整个面板：

$('#panel').click

而不是

$("div.panel_button").click

有点偏离主题，但您应该通过停止正在进行的任何先前动画来改进动画：

$("div#panel").stop().animate(/* ... */);

Answer 3

当您单击某个元素时，您的点击会在DOM树中向上传播（冒泡），因此所有父母也会收到点击事件，并且所有处理程序都会被执行。

当你在另一个可点击元素中有一个可点击元素时会出现问题，因为内部元素将处理click事件但是然后将事件传递给它的父元素，然后也处理它

解决此问题的常用方法是在捕获单击事件时阻止默认行为，如下所示：

$("div.panel_button").click(function(ev){
    $("div#panel").animate({
        height: "430px"
    })
    .animate({
        height: "400px"
    }, "fast");
    ev.preventDefault();
}); 

$("div#hide_button").click(function(ev){
    $("div#panel").animate({
        height: "0px"
    }, "fast");
    ev.preventDefault();
});

Answer 4

div.panel_button twice as big为嵌入式a。这应该可以解决问题：

$("div.panel_button a").click(function(){

Answer 5

（更新）aww。选择器是主要问题。使用$("#panel")

问题是弹跳效应。

这可以解决您的问题：

 var show = false;

$("div.panel_button").click(function(e){
   if (show) return;
    $("div#panel").animate({
        height: "430px"
    })
    .animate({
        height: "400px"
    }, "fast");

 show = true;
 e.preventDefault();

});

$("div#hide_button").click(function(e){
   if(!show) return;
    $("div#panel").animate({
        height: "0px"
    }, "fast");

show = false;
    e.preventDefault();
});

如果您想使用更具创意的缓动效果，则应使用带有缓动参数的.slideDown()函数。

宽松 .animate（）的其余参数是一个命名要使用的缓动函数的字符串。缓动函数指定动画在动画中的不同点处进行的速度。 jQuery库中唯一的缓动实现是默认的，称为swing，以及一个以恒定速度进行的实现，称为线性。使用插件可以使用更多的缓动函数，尤其是jQuery UI套件。

要进行广泛的宽松展示，请访问this网站。

根据其他asnwers，您还应该使用event.preventDefault来阻止事件冒泡通过DOM。

奇怪的jQuery和HTML实现

5 个答案: