Показать сообщение отдельно
  #18 (permalink)  
Старый 03.10.2010, 14:46
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от 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>
Ответить с цитированием