Как найти одинаковые элементы из других блоков?

Question

[Расул Гитинов]

Делаю выпадающие списки. Вот код:

<div class="audio__item section__item">
	<div class="audio__select">
		<div class="audio__input">Список треков</div>
		<div class="audio__list">
	</div>
</div>

<div class="audio__item section__item">
	<div class="audio__select">
		<div class="audio__input">Список треков</div>
		<div class="audio__list">
	</div>
</div>

<div class="audio__item section__item">
	<div class="audio__select">
		<div class="audio__input">Список треков</div>
		<div class="audio__list">
	</div>
</div>

Пытаюсь сделать, чтобы если открыт первый .list и пользователь открывает другой, то, чтобы первый при этом закрывался. Вот такой код у меня сейчас:

$('.audio__select').click(function(e) {
	e.preventDefault();
	$(this).parent().find('.audio__list').toggleClass('active');
});

Answer 1

[Stalker_RED]

$('.audio__select').click(function(e) {
  e.preventDefault();
  $('.audio__list').removeClass('active') // закрыть все
  $(this).parent().find('.audio__list').toggleClass('active');
});

Comments

[Расул Гитинов]

Спасибо большое!

[Расул Гитинов]

Но при повторном клике по тому, который уже открыт, он не закрывается

[Stalker_RED]

Расул Гитинов, логично. Сперва сработает removeClass, затем toggleClass.
И вы не описывали, что он должен закрываться.

[Сергей delphinpro]

Расул Гитинов, решается легко

$('.audio__list').not(this).removeClass('active') // закрыть все кроме кликнутого

[Расул Гитинов]

Сергей, Не сработало

[Сергей delphinpro]

Расул Гитинов, сработало https://jsfiddle.net/yk8qj4ck/

[Расул Гитинов]

Сергей, Но у меня немного другая структура. Элемент .audio__list находится не внутри блока .audio__select, а рядом: https://jsfiddle.net/therasel/m6uwru26/

[Расул Гитинов]

Сергей, Получилось вот так:

$('.audio__select').click(function(e) {
	e.preventDefault();
	$('.audio__list').parent().find('.audio__select').not(this).parent().find('.audio__list').removeClass('active');
	$(this).parent().find('.audio__list').toggleClass('active');
	$(this).parent().css('z-index', 3).siblings().css('z-index', 'unset');
});

[Сергей delphinpro]

Расул Гитинов, html я скопировал из вашего вопроса =)
Выходит вы сами не знаете что у вас там =))))

[Расул Гитинов]

Сергей, Виноват, сам немного запутался =) Спасибо за помощь!