Как написать скрипт раскрытия/закрытия пунктов меню?

Question

[Андрей]

Есть разметка такого вида:

<ul class="b-header-menu">
	<li>
		<a class="b-link">Пункт 1</a>
		<ul>
			<h2>Пункт 1</h2>
			<li><a href="#">Список 1</a></li>
			<li><a href="#">Список 2</a></li>
			<li><a href="#">Список 3</a></li>
			<li><a href="#">Список 4</a></li>
			<li><a href="#">Список 5</a></li>
			<li><a href="#">Список 6</a></li>
			<li><a href="#">Список 7</a></li>
		</ul>
	</li>
	<li>
		<a class="b-link">Пункт 2</a>
		
		<ul>
			<h2>Пункт 2</h2>
			<li><a href="#">Список 1</a></li>
			<li><a href="#">Список 2</a></li>
			<li><a href="#">Список 3</a></li>
		</ul>
		
	</li>
	<li>
		<a class="b-link">Пункт 3</a>
		<ul>
			<h2>Пункт 3</h2>
			<li><a href="#">Список 1</a></li>
			<li><a href="#">Список 2</a></li>
			<li><a href="#">Список 3</a></li>
		</ul>
		
	</li>
	<li>
		<a href="#">Пункт 4</a>
	</li>
</ul>

Не могу придумать, как написать скрипт, чтобы по клику на элементы с классом b-link открывался список меню рядом с элементом (Список 1, Список 2, Список 3). А по клику на другой элемент класса b-link, старый список закрывался, и новый открывался.

На первый взгляд, лёгкая задачка, но у меня не получается. Помогите решить, пожалуйста.

Answer 1

[bzz]

$(function() {
	$('.b-link').next('ul').hide();
	$('.b-link').click(function(){
		$('.b-link').next('ul').hide();
		$(this).next('ul').toggle();
		return false;
	});
	$('.b-header-menu h2').click(function(){
		$(this).parent('ul').hide();
		return false;
	});
});

Comments

[Андрей]

@bzz спасибо огромное! А можно сделать так, чтобы по нажатию на h2 открытого списка, этот список закрывался?

[bzz]

Можно. Добавил в ответ. У вас не очень хорошая верстка, стоит ее не много причесать:)

[Андрей]

@bzz такой вёрстки требует дизайн :)

[Nikita]

На мой взгляд решение с использованием hide() и show() может оказаться тяжеловат. Лучше использовать toggleClass() и процесс раскукоживания/скукоживания сделать через css.