JQuery .hide problem

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" /> 

Не уверен, что это может помочь.

Answer 3

Что произойдет, если вы измените обработчик кликов на .inner, чтобы применить вместо этого только изображение окна? Вы также можете подумать о возврате false из обработчика .close, чтобы убедиться, что событие не попадает в обработчик кликов, который изменит местоположение. Я подозреваю, что оба они увольняются, а местоположение меняется - и ваш div становится анимированным.

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

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

Последнее использует «/» родительский дочерний селектор, так что обработчик применяется только к изображению, которое является прямым потомком DIV. BTW, что происходит с пробелами перед селектором классов? Мне нужно посмотреть на код, чтобы узнать, имеет ли это значение, но я никогда не видел этого раньше.

Answer 4

Ваш внутренний div окружает закрывающий div, поэтому любой щелчок по изображению для закрытия приведет к перезагрузке страницы.