Как реализовать появление блока при нажатии на ссылку, если таких блоков несколько?

Question

[Роман Павлов]

Собственно, требуется показать div#list при клике на a#link. Но есть проблема.

На данный момент есть код

$(document).ready(function () {
	$('a#link').click(function (e) {
		$(this).toggleClass('active');
		$('#list').toggle();

		e.stopPropagation();
	});
});

А проблема в том, что абсолютно все a#link открывают только первый div#list (на странице их несколько).

Структура HTML примерно такова:

<div id="block"><a href="#" id="link" class="nactive">Ссылка</a></div>
<div id="list">
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
</div>

Собственно, как реализовать?

Answer 1

[Rsa97]

Ну, во первых, несколько элементов с одинаковыми id не есть гуд.
А если надо, чтобы каждый #link открывал свой #list, то таки вместо #link использовать .link и:
- поместить их с .list в один div и использовать .siblings();
- в .link указать атрибут data-id, содержащий уникальный #list1, #list2...

Comments

[Роман Павлов]

А можно на небольшом примере?

[Rsa97]

jsfiddle.net/WSR8j
Вариант через data-id

[Rsa97]

jsfiddle.net/9M485
Вариант через общий контейнер

Answer 2

[Юрий Лобанов]

Можно так
codepen.io/iiil/pen/KGerA

только измените мои селекторы a и div на .link и .list
Естественно, использования нескольких одинаковых id недопустимо. Используйте классы.

Comments

[Роман Павлов]

Возможно, я не правильно понял пример, но class active должен задаватся ссылке

[Юрий Лобанов]

@JaneHolland ага, неправильно ) мой вариант не очень хорош, я просто развлекаюсь. Ответ Вам @Rsa97 дал уже.
Просто в моем варианте использует индекс, а он может меняться.
Исправьте свою верстку в части id, потрудитесь выложить код на jsfiddle.net и Вам моментально помогут. А так без обид - никакого интереса..

[Юрий Лобанов]

@JaneHolland способов реализации очень много.

[Роман Павлов]

@iiil Вот код, правда тут он работает еще не корректней :(

[Роман Павлов]

@iiil ах, не заметил, что jQuery подключить надо слева, вот

[Юрий Лобанов]

@JaneHolland вот смотрите, у Вас есть блок с классом wr - внутри кнопка и список.
Вы говорите, что будет несколько кнопок и несколько списков. Как они будут выглядеть? Это будет несколько блоков wr или все они будут внутри блока wr - это очень важный момент. Потому что если структура будет вот такая:
jsfiddle.net/C9SX8/7
то все можно сделать из без привязки data-атрибутами.

[Юрий Лобанов]

@JaneHolland jsfiddle.net/C9SX8/8 или вот так

[Роман Павлов]

@iiil да, это будет несколько блоков wr

[Юрий Лобанов]

@JaneHolland ну так я Вам сделал уже в таком случае. Смотрите по ссылке

[Роман Павлов]

@iiil я посмотрел, вроде все замечательно, но не пойму: а в чем, собственно, разница?

[Роман Павлов]

Ну, не суть. Главное, что работает. Спасибо :)

[Юрий Лобанов]

@JaneHolland разницу Вам объяснил @Rsa97
Присмотритесь к его вариантам, с теми же data-id. Его ответ явно заслуживает решения.

Answer 3

[Filipp Shcherbanich]

используйте eq() в такой случае