Вход

Просмотр полной версии : Элемент не скрывается при клике на самом себе

AlexAkhremenko
28.10.2011, 17:00
ссылка на сайт (http://test.irev.ru/index.php?option=com_content&view=article&id=47:protsess-sozdaniya-sajta-dlya-kompanii-terraformru-3&catid=9&Itemid=104&layout=irevo:news)

В правом верхнем углу есть кнопка "Все новости". При клике по ней она должна скрываться, а скрытый список под ней должен появляться. Если увести курсор за пределы списка, список пропадает, а кнопка появляется обратно.

Скрипт:
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-ая строка не срабатывает. В чем проблема?
DjDiablo
28.10.2011, 17:09
немогу понять нафига вам два обрабочика события 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 надо было всё таки приложить.
Андрей38
28.10.2011, 20:35
$('').live('click ',function(){

})
AlexAkhremenko
28.10.2011, 21:27
немогу понять нафига вам два обрабочика события 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 надо было всё таки приложить.
mouseout желательно вешать на контейнер который содержит в себе и заголовок и меню.

У тебя меню исчезает когда ты за пределы newHeaderRow выходишь. Посмотри что там за траблы с CSS

C css все нормально. Если при клике кнопка исчезнет, курсор останется над меню. И теперь если выйдет за пределы меню, все вернется назад. А кнопка не исчезает, а значит курсор остается над кнопкой. И если он далее пойдет вниз на меню, то да, при mouseout меню исчезнет. А если в другие стороны пойдет, то, конечно же, mouseout нету. Зачем кнопке mouseout, если она должна исчезнуть?
Вопрос именно в том, как сделать, чтобы кнопка при клике получала свойство display:none.
ksa
28.10.2011, 21:40
как сделать, чтобы кнопка при клике получала свойство 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>
AlexAkhremenko
28.10.2011, 22:52
а почему же тогда мой скрипт не срабатывает?
DjDiablo
29.10.2011, 00:44
Лучше попробуй обьяснить почему я немогу, в хроме не одной опции ниже технологических новинок выбрать.
DjDiablo
29.10.2011, 16:33
Повозился сегодня немного, забавно но мне не удалось добится вменяемой работы с вложенными элементами от 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>
ksa
29.10.2011, 21:05
а почему же тогда мой скрипт не срабатывает?
У тебя нет полного примера, как тогда ответить на твой вопрос...
Андрей38
13.11.2011, 14:35
Повозился сегодня немного, забавно но мне не удалось добится вменяемой работы с вложенными элементами от 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>

И я сделал проверку по координате, а то моусеоут че-то не работало.
Но код у Вас полный ,с бинд.
Спасибо,пригодилось
Андрей38
13.11.2011, 14:46
Вы пишите так
$('#list'), а потом
$(list).hide()
Код работает также и по стандартному шаблону $('#list'), $('#list').hide()
Пожайлуста, скажите, в чем отличие этих записей?
DjDiablo
13.11.2011, 23:30
там в комментах впринципе описано.

list это переменная.
По идеи list.hide() должно быть достаточно.
код $(list).hide() - это масло масленное, считай это опечаткой.

Ссылка на элемент dom в переменной это хорошая практика. Находишь объект сохраняешь его в переменную (в нашем случае лист) и обращайся к нему хоть 100 раз без потери скорости. В противном случае его придется 100 раз искать, а поиск это дорогое удовольствие, в плане скорости. А так раз нашли, и юзаем.
Андрей38
14.11.2011, 01:34
Спасибо ОГРОМНОЕ за объяснение!!!