Jquery .hide问题

Question

我使用jquery在页面底部显示类似MSN的动画窗口。

Jquery代码：

$(document).ready(function() {
$(" .inner").stop().animate({height:'142px'},{queue:false, duration:600});

$(' .close').click(function(event) {
$(' .inner').hide();
});
$(' .inner').click(function() {
location.replace("somepage.php");
});
});

CSS：

.close {height:14px; z-index:100; position: absolute; margin-left:174px; margin-top:12px;    border:1px solid #F00;}
.inner {position:absolute;bottom:0;width:201px;height:117px;right: 0; margin-right:10px; float:left; z-index:-1; display:block; cursor:pointer;}

HTML：

<div class="inner"><div class="close"><img src="img/close.png" width="9" height="8" /></div><img src="img/window.png" width="201" height="117" /></div>

我在这段代码中遇到的问题是关闭按钮(显示在Jquery的右上角)不能触发.inner .hide函数。

为什么？

Answer 1

$('div.close > img').click(function(event) {
    $('div.inner').hide();
});

是否应触发事件

Answer 2

如果将.inner上的单击处理程序更改为仅应用于窗口图像，会发生什么情况？您还可以考虑从.close处理程序返回false，以确保事件不会冒泡到将更改位置的单击处理程序。我怀疑这两个都被触发了，并且位置发生了变化--并且您的div被重新设置为动画。

$('.close').click(function(event) {
    $('.inner').hide();
    return false;
});

$('.inner > img').click( function() {
      location.replace('somepage.php');
});

后者使用“父/子”选择器，以便处理程序仅应用于作为DIV的直接子级的图像。顺便说一句，类选择器前面的空格是怎么回事？我必须查看代码，看看它是否重要，但我以前从未见过这一点。

Answer 3

试着让你的img成为一个非内联元素。

#img_close {
display:block;}


<img id="img_close" src="img/close.png" width="9" height="8" />

不是100%确定这可能会有帮助。