Question

首先是代码。

HTML 的

<div class="wrap">
  <div class="logo">
    <img src="images/logo.png" alt="Fabian">
  </div>
</div>
<div class="wrap2">
  <div class="phone">
    <a href="#"><img src="images/phonewhite.png"  alt="Fabian "></a>
  </div>
  <div class="xdiv">
    <img src="images/x.png" alt="Fabian">
  </div>
</div>
<div class="wrap3"></div>
<div class="wrap4"></div>
<div class="wrap5"></div>

的Javascript

$(".wrap2").click(function(){
    $(".wrap2").css("height","400px");
    $(".wrap3").animate({top:'570px'}, 500);
    $(".wrap4").animate({top:'740px'}, 500);
    $(".wrap5").animate({top:'910px'}, 500); 
    $(".xdiv").css("visibility","visible");                 
});
$(".xdiv").click(function(){                  
    $(".wrap2").animate({height:'170px'}, 500);
    $(".wrap3").animate({top:'340px'}, 500);
    $(".wrap4").animate({top:'510px'}, 10);
    $(".wrap5").animate({top:'680px'}, 10);
    $(".xdiv").css("visibility","hidden");
});

xdiv位于wrap2 div内。问题是，如果我点击wrap div，其他wrap2 s（3,4,5）也会相应地生成动画，但如果我点击“xdiv”重置它们则不会。动画开始，但立即重新滚动到wrap2单击功能的属性。这里有一个jsFiddle示例http://jsfiddle.net/yxtQ5/1/

Answer 1

问题是你的xdiv包装在wrap2中。因此，当您单击xdiv时，其父级会收到click事件的通知。

将xdiv从wrap2中拉出来或使用stopPropagation()

 $(".xdiv").click(function (e) {
        e.stopPropagation(); //stops parent handler from being notified of the event.
    //code here 

 });

Jsfiddle http://jsfiddle.net/yxtQ5/4/

Answer 2

或者这个变体也适用于我：

$(".xdiv").click(function(){                  
    $(".wrap2").animate({height:'170px'}, 500);
    $(".wrap3").animate({top:'340px'}, 500);
    $(".wrap4").animate({top:'510px'}, 10);
    $(".wrap5").animate({top:'680px'}, 10);
    $(".xdiv").css("visibility","hidden");
    return false;
});

jQuery div没有正确的动画

2 个答案: