Форум

Aetae · #11 (**permalink**) 03.10.2010, 02:23

Сообщение от arwprod

Aetae, а кросс-браузерного варианта для отмены всплытия от нижнего элемента к верхнему нету? =\

А для кого я линк в пост вставил?)

arwprod · #12 (**permalink**) 03.10.2010, 02:37

Aetae, либо ночь на дворе, либо: "Остановка всплытия" - кроссбраузерно, а остальное нет... Хотя в моем случае по-моему все равно откуда и куда двигаться... пора спать, завтра выложу результат =\

arwprod · #13 (**permalink**) 03.10.2010, 02:53

Octane,
Вы это имели ввиду?

if($(event.target.nodeName).parent('ul').hasClass('menu')){alert('Нажали на меню')}

вместо alerta делаем вызов по умолчанию, в противном случае, выключаем менюшку?

monolithed · #14 (**permalink**) 03.10.2010, 11:47

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
body {background: #424A51;}
.block {position:absolute;top:20%;left: 40%;width: 200px;height: 50px;}
.block a {border: 1px solid #DDD;color: #FFF;display: block;text-align: center;text-decoration:none;width: 140px;height: 20px;}
.block img {border: 1px solid #DDD; width: 140px;height: 50px;}
</style>

<script type="text/javascript">
$(function(){
	$('.block').each(function(){
		$(this).find('img').hide();
		$(this).find('a').mouseover(function(){
			$(this).next('img').show();
		});
		$(document).click(function(e){
			(e.target.nodeName != $('.block img').get(0).tagName) && $(this).find('img').hide();
		});
	});
});
</script>

<div class="block">
	<a href="#" rel="">link</a>
	<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" />
</div>

arwprod · #15 (**permalink**) 03.10.2010, 12:29

monolithed, не пойдет

$("body").click(function(event) {
	if($(event.target.nodeName).parents('ul').hasClass('menu') || event.target.className == 'menu'){
		//открываем меню, сделав еще1 клик
	} else {
		//закрываем меню
	}
});

пока рабочий вариант только этот, но, если нужно открыть меню по клику, то приходится делать 2 клика, а если открыть нужно при наводке, то сначала делаем клик, потом немного теребим мышку и вуаля... в общем бред. Как вариант, сделать иначе:

//conf - options	
if(conf.event == 'click') {
	$("body").click(function(event) {
		if($(event.target.nodeName).parents('ul').hasClass('menu') || event.target.className == 'menu'){
			//открываем меню, без какого-либо event
		} else {
			//закрываем меню
		}
	}); 
} else {
	//юзаем обычный hover для работы с вложенностью
}

monolithed · #16 (**permalink**) 03.10.2010, 12:41

Цитата:

arwprod monolithed, не пойдет

Интересно узнать почему?

arwprod · #17 (**permalink**) 03.10.2010, 12:46

monolithed,
потому что, если

$(this).find('a').mouseover(function(){

заменить на

$(this).find('a').click(function(){

картинка не откроется вообще

Octane · #18 (**permalink**) 03.10.2010, 14:46

Сообщение от arwprod

$(event.target.nodeName)

Зачем nodeName?

Код простейший же:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Menu</title>
<style>
body {
	font: 14px/24px sans-serif;
}
.nav {
	height: 24px;
	background: #ccc;
	zoom: 1; /* IE7 clear fix */
}
.nav:after {
	display: block;
	overflow: hidden;
	height: 0;
	clear: both;
	content: ".";
}
.menu {
	position: relative;
	float: left;
	margin-right: 10px;
}
.menu .list, .menu .list li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu .list {
	display: none;
	position: absolute;
	top: 24px;
	left: 0;
	background: #ccf;
}
.menu .list li {
	white-space: nowrap;
}
</style>
<div class="nav">
	<div class="menu">
		<span class="toggler">Menu 1</span>
		<ul class="list">
			<li><a href="#">Menu 1 item 1</a></li>
			<li><a href="#">Menu 1 item 2</a></li>
			<li><a href="#">Menu 1 item 3</a></li>
			<li><a href="#">Menu 1 item 4</a></li>
			<li><a href="#">Menu 1 item 5</a></li>
		</ul>
	</div>
	<div class="menu">
		<span class="toggler">Menu 2</span>
		<ul class="list">
			<li><a href="#">Menu 2 item 1</a></li>
			<li><a href="#">Menu 2 item 2</a></li>
			<li><a href="#">Menu 2 item 3</a></li>
			<li><a href="#">Menu 2 item 4</a></li>
			<li><a href="#">Menu 2 item 5</a></li>
		</ul>
	</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function () {
	$(".menu .toggler").click(function () {
		var $list = $(this).next(".list").stop();
		$list.slideDown(100, function () {
			$(document).one("click", function () {
				$list.slideUp(100);
			})
		});
	});
});
</script>

monolithed · #19 (**permalink**) 03.10.2010, 16:55

Сообщение от Octane

Зачем nodeName?

Для того чтобы можно перенести фокус на элемент, к примеру если он будет наполнен текстом и пр..

arwprod · #20 (**permalink**) 04.10.2010, 01:30

Octane, да вот если зохочется внести форму в какой-то пункт меню, то трындец)))
monolithed, именно для этого)

Форум

Справочник

Discord чат

Курсы javascript