Jquery. Скрыть проблему

Question

Я использую jquery для отображения анимированного MSN-подобного окна внизу страницы.

Код запроса:

$(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, чтобы применить его только к изображению окна? Вы также можете рассмотреть возможность возврата false из обработчика .close, чтобы убедиться, что событие не всплывает в обработчике кликов, который собирается изменить местоположение. Я подозреваю, что оба они запускаются и местоположение меняется - и ваш div оживляется.

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

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

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

Answer 3

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

Answer 4

Попробуйте сделать ваш img не встроенным элементом.

#img_close {
display:block;}


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

Не уверен на 100%, что может помочь.