jQuery акордеон при ховере.

mishka · September 23, 2009

Есть код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style type="text/css">
	<!--
	#nav{
		margin:0;
		padding:0;
		list-style:none;
		width:300px;
		overflow:hidden;
		font:18px/20px Arial, Verdana, sans-serif;
	}
	#nav li{
		width:100%;
		float:left;
		border-bottom:1px solid #000;
		position:relative;
	}
	#nav li a{
		display:block;
		padding:5px;
		background:red;
		text-decoration:none;
		color:#fff;
	}
	#nav li .slide{
		width:100%;
		overflow:hidden;
	}
	#nav li ul{
		margin:0;
		padding:0;
		list-style:none;
		width:100%;
		overflow:hidden;
	}
	#nav li ul li{
		border:0;
	}
	#nav li ul li a{
		padding:3px 5px;
		background:green;
	}
	-->
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	<!--
	$(document).ready(function(){
		$('#nav li .slide').hide();

		$('#nav li').hover(function(){
			$(this).find('.slide').slideDown(300);
		},function(){
			$(this).find('.slide').slideUp(300);
		});
	});
	//-->
	</script>
</head>
<body>
	<ul id="nav">
		<li class="opener">
			<a href="#">link1</a>
			<div class="slide">
				<ul>
					<li><a href="#">link1</a></li>
					<li><a href="#">link2</a></li>
					<li><a href="#">link3</a></li>
					<li><a href="#">link4</a></li>
				</ul>
			</div>
		</li>
		<li class="opener">
			<a href="#">link2</a>
			<div class="slide">
				<ul>
					<li><a href="#">link1</a></li>
					<li><a href="#">link2</a></li>
					<li><a href="#">link3</a></li>
					<li><a href="#">link4</a></li>
					<li><a href="#">link1</a></li>
					<li><a href="#">link2</a></li>
					<li><a href="#">link3</a></li>
					<li><a href="#">link4</a></li>
				</ul>
			</div>
		</li>
		<li class="opener">
			<a href="#">link3</a>
			<div class="slide">
				<ul>
					<li><a href="#">link1</a></li>
					<li><a href="#">link2</a></li>
				</ul>
			</div>
		</li>
		<li>
			<a href="#">link4</a>
		</li>
		<li>
			<a href="#">link5</a>
		</li>
	</ul>
</body>
</html>

Если мышкой быстро поводить по акордеону и потом убрать ее, то он продолжает самовольно "играть". Как от этого избавится?

s0rr0w · September 23, 2009

Если мышкой быстро поводить по акордеону и потом убрать ее, то он продолжает самовольно "играть". Как от этого избавится?

Можно.

1. Подправить код аккордеона

2. Найти другой код.

mishka · September 23, 2009

Дело в том что найти не интересно. Интересней самому знать как поправить это.

s0rr0w · September 23, 2009

Дело в том что найти не интересно. Интересней самому знать как поправить это.

Тогда тебе нужно чуток поразбираться с данным плагином. Там фишка в том, что при наведении на следующий элемент нужно убивать анимацию у предыдущего.

mishka · September 23, 2009

Как работает я понимаю... как сделать правильно незнаю

"Все понимаю, сказать ниче немогу..."

e1f · September 24, 2009

Почитай тут. Ну и весь док по нему, естественно. На этот евент забинди отмену анимации остльных вкладок.

Sign In

jQuery акордеон при ховере.

Question

mishka

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

e1f

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information