28.10.2011, 17:00
|
|
Новичок на форуме
|
|
Регистрация: 25.03.2010
Сообщений: 3
|
|
|
Элемент не скрывается при клике на самом себе
ссылка на сайт
В правом верхнем углу есть кнопка "Все новости". При клике по ней она должна скрываться, а скрытый список под ней должен появляться. Если увести курсор за пределы списка, список пропадает, а кнопка появляется обратно.
Скрипт:
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-ая строка не срабатывает. В чем проблема?
|
|
28.10.2011, 17:09
|
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
немогу понять нафига вам два обрабочика события 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 надо было всё таки приложить.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Последний раз редактировалось DjDiablo, 28.10.2011 в 18:00.
|
|
28.10.2011, 20:35
|
 |
Профессор
|
|
Регистрация: 11.12.2010
Сообщений: 261
|
|
|
$('').live('click ',function(){
})
|
|
28.10.2011, 21:27
|
|
Новичок на форуме
|
|
Регистрация: 25.03.2010
Сообщений: 3
|
|
Сообщение от DjDiablo
|
немогу понять нафига вам два обрабочика события 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 надо было всё таки приложить.
|
|
Сообщение от DjDiablo
|
mouseout желательно вешать на контейнер который содержит в себе и заголовок и меню.
У тебя меню исчезает когда ты за пределы newHeaderRow выходишь. Посмотри что там за траблы с CSS
|
C css все нормально. Если при клике кнопка исчезнет, курсор останется над меню. И теперь если выйдет за пределы меню, все вернется назад. А кнопка не исчезает, а значит курсор остается над кнопкой. И если он далее пойдет вниз на меню, то да, при mouseout меню исчезнет. А если в другие стороны пойдет, то, конечно же, mouseout нету. Зачем кнопке mouseout, если она должна исчезнуть?
Вопрос именно в том, как сделать, чтобы кнопка при клике получала свойство display:none.
|
|
28.10.2011, 21:40
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Сообщение от AlexAkhremenko
|
|
как сделать, чтобы кнопка при клике получала свойство 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>
|
|
28.10.2011, 22:52
|
|
Новичок на форуме
|
|
Регистрация: 25.03.2010
Сообщений: 3
|
|
|
а почему же тогда мой скрипт не срабатывает?
|
|
29.10.2011, 00:44
|
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
|
Лучше попробуй обьяснить почему я немогу, в хроме не одной опции ниже технологических новинок выбрать.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
|
|
29.10.2011, 16:33
|
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
Повозился сегодня немного, забавно но мне не удалось добится вменяемой работы с вложенными элементами от 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>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Последний раз редактировалось DjDiablo, 29.10.2011 в 17:03.
|
|
29.10.2011, 21:05
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Сообщение от AlexAkhremenko
|
|
а почему же тогда мой скрипт не срабатывает?
|
У тебя нет полного примера, как тогда ответить на твой вопрос... |
|
13.11.2011, 14:35
|
|
Профессор
|
|
Регистрация: 11.12.2010
Сообщений: 261
|
|
|
Сообщение от DjDiablo
|
Повозился сегодня немного, забавно но мне не удалось добится вменяемой работы с вложенными элементами от 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>
|
И я сделал проверку по координате, а то моусеоут че-то не работало.
Но код у Вас полный ,с бинд.
Спасибо,пригодилось |
|
|
|
