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> 

，我有這段代碼的問題是，關閉按鈕（在顯示.inner DIV的右上角）無法激發Jquery .hide函數。

爲什麼？

Answer 1

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

應該觸發事件

Answer 2

嘗試使你的img一個非內聯元素。

#img_close { 
display:block;} 


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

不是100％確定可能有幫助。

Answer 3

如果將.inner上的點擊處理程序更改爲僅適用於窗口圖像，會發生什麼情況？您也可以考慮從.close處理程序返回false以確保該事件不會冒泡到將要更改位置的點擊處理程序。我懷疑這兩個都被解僱了，而且地點發生了變化 - 你的div被重新制作成動畫。因此，處理程序僅施加到作爲DIV的直接子圖像

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

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

後者使用「父/子」選擇器。順便說一句，類選擇器之前的空格有什麼用？我不得不看看代碼，看它是否重要，但我以前從未見過。

Answer 4

你的內部div圍繞關閉的div，所以任何點擊圖片關閉將導致頁面重新加載。