Javascript jQuery和HTML实现

好的，我要做的是让用户点击一个链接，然后让一个方框滑到桌面上
我已经完成了主要的事情，但是这个盒子似乎有点奇怪。如果单击指定的框（在本例中为“关于博主”），框将向下滑动。然后，如果单击导航下方区域中的任何位置，该框也会向下滑动。我该怎么阻止这一切？
相关编码：

CSS:

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>

如果你想看，我的网站在

---

谢谢你的关注

当您单击一个元素时，您的单击会在DOM树中传播（冒泡），因此所有父级也会接收到单击事件，并执行其所有处理程序

如果在另一个可单击元素中有一个可单击元素，则会出现问题，因为内部元素将处理单击事件，但随后将事件传递给其父元素，然后父元素也将处理该事件

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

$("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();
});

---

因为它也是

div.panel\u按钮

。您应该在jQuery中重新定义选择器。

div.panel_按钮

与嵌入的

a

相同。这应该可以解决问题：

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

（更新）aww。选择器是主要问题。使用

$（“#面板”）

问题在于反弹效应

这可能会解决您的问题：

 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();
}); 

如果你想使用更具创造性的缓和效果，你应该使用带有缓和参数的函数

缓和 .animate（）的其余参数是一个字符串，用于命名要使用的函数。缓和函数指定动画在动画中不同点的进展速度。jQuery库中唯一的实现是默认的，称为swing，以及一个以恒定速度进行的，称为linear的实现。插件的使用提供了更多的简化功能，最显著的是jQueryUI套件

对于一个伟大的扩展访问网站

---

根据其他asnwers的说法，您还应该使用event.preventDefault来停止事件在DOM中冒泡。

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

$('#panel').click

而不是

$("div.panel_button").click

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

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

---

顺便说一句，如果你再次点击链接，它会再次减速和上升。。问题不仅在于气泡。你看到他为什么使用动画两次了吗？他想使用反弹效果。因此，停止设置动画将不好。请在开始第一个动画之前停止；）。这将阻止任何其他排队的动画开始或继续，并清除反弹效果

$("div.panel_button").click

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