Элемент не скрывается при клике на самом себе
ссылка на сайт
В правом верхнем углу есть кнопка "Все новости". При клике по ней она должна скрываться, а скрытый список под ней должен появляться. Если увести курсор за пределы списка, список пропадает, а кнопка появляется обратно. Скрипт:
jQuery(function ($) {
$(document).ready(function () {
jQuery('#catTitle,#catTitle a').unbind();
jQuery('#catTitle,#catTitle a').bind('click', function() {return false});
jQuery('#catTitle').click(function(){
jQuery('#catTitle').css({display: 'none'});
jQuery('#right').css({display: 'block'});
})
jQuery('#right').mouseout(function(){
jQuery('#right').hide();
jQuery('#catTitle').show();
})
});
});
HTML приводить не буду, легче отладчиком посмотреть. Собственно, при клике список появляется, а кнопка не пропадает. 6-ая строка не срабатывает. В чем проблема? |
немогу понять нафига вам два обрабочика события click
jQuery('#catTitle,#catTitle a').bind('click', function() {return false}); и jQuery('#catTitle').click(function(){ Оставьте только второй вида
jQuery('#catTitle,#catTitle a').click(function(){
jQuery('#catTitle').css({display: 'none'});
jQuery('#right').css({display: 'block'});
return false;
}
mouseout желательно вешать на контейнер который содержит в себе и заголовок и меню. У тебя меню исчезает когда ты за пределы newHeaderRow выходишь. Посмотри что там за траблы с CSS зы. Код html надо было всё таки приложить. |
$('').live('click ',function(){
}) |
Цитата:
Цитата:
Вопрос именно в том, как сделать, чтобы кнопка при клике получала свойство display:none. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$(this).fadeOut();
});
});
</script>
</head>
<body>
<button>Start</button>
</body>
</html>
|
а почему же тогда мой скрипт не срабатывает?
|
Лучше попробуй обьяснить почему я немогу, в хроме не одной опции ниже технологических новинок выбрать.
|
Повозился сегодня немного, забавно но мне не удалось добится вменяемой работы с вложенными элементами от mouseOut. При переходе между вложенными элементами, событие упорно срабатывает.Блин обидно :(.
Пришлось писать костыль проверяющий действительно ли мы вышли за границы контейнера.
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#list {
position: relative;
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
overflow:hidden;
display:none;
// display:block;
}
</style>
</head>
<body>
<div id="conteiner">
<!-- заголовок и меню, это два независимыз обьекта в контейнере(невложены один в другой) -->
<div id="caption">я заголовок</div>
<div id="list" >
<ul>
<li> строка1</li>
<li> строка2</li>
<li> строка3</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$("#caption").click(function(){
$("#list").show();
$("#caption").hide();
// событие mouse out
$("#list").mouseout(function(f){
// найдём list один раз, сбережём время
var list=$(this);
// позволим выполнить действие если мышь действительно за границами блока
if (f.pageX>list.width() || f.pageY>list.height() ||
f.pageX<list.offset().left || f.pageY<list.offset().top){
// скрываем меню
$(list).hide();
// показываем заголовок
$("#caption").show();
// отвяжем событие, чтобы несрабатывало по напрасну
$(list).unbind("mouseout");
}
});
});
});
</script>
</body>
|
Цитата:
|
Цитата:
Но код у Вас полный ,с бинд. Спасибо,пригодилось |
| Часовой пояс GMT +3, время: 16:03. |