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>

我对此代码的问题是关闭按钮（显示在.inner DIV的右上角）无法触发Jquery .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％肯定可能会有帮助。

Answer 4

您的内部div围绕关闭div，因此任何单击要关闭的图像都会导致页面重新加载。

Jquery .hide问题

4 个答案: