Как выбрать нужный элемент при клике JS?

Question

[DeniSidorenko]

Всем привет простой вопрос но не знаю js настолько сильно что бы сделать.

Есть такое дерево

<div class="parents-elements">


  <div class="element">
    <div class="dropdown"></div>
  </div>
  
  <div class="element">
    <div class="dropdown"></div>
  </div>
  
  <div class="element">
    <div class="dropdown"></div>
  </div>
  
  <div class="element">
    <div class="dropdown"></div>
  </div>
  
  <div class="element">
    <div class="dropdown"></div>
  </div>


</div>

Dropdown скрыта через display none. Мне надо что бы при клике на нужный элемент получала display block только тот dropdown на который родительский элемент нажали. При повторном клике она скрывалась, а если при открытой нажать на другой элемент это скрывалась и открывалась та.
Тут надо вещать обработчик и через $this все это делать но и за нехватки знаний не могу написать такой код но думаю что это очень легко.
Заранее спасибо.

Answer 1

[Максим Тимофеев]

$('#some_btn').on('click',function(){
   $('#some_container').toggleClass('hidden');
});

в css:
.hidden {display: none;}

Comments

[DeniSidorenko]

Не думаю что это хорошее решение. Во первых там около 30 блоков таких. Всем выдавать id , да и еще одинаковый. Семантика портиться и валидатор будет ругаться. Я думаю в таком направление. Повесить события на клик, и при клике children dropdown элементу $this задать display block. Просто я не знаю в js как это реализовать

[Максим Тимофеев]

DeniSidorenko: Пример конкретнее приведите. Будет лучше вариант,по какому элементу клик, где относительно него ссылка и т.д. Это может быть:

$('a').on('click',function(){
   $(this).next('div').toggleClass('hidden');
});

или

$('a').on('click',function(){
  var selector =  $(this).data('open-id');
  $(selector).toggleClass('hidden');
});

Ваше

при клике на нужный элемент

не о чем. Нао понимать иерархию документа и что где.

[DeniSidorenko]

Максим Тимофеев:

При клике на find-grid; find-category__dropdown получает display block

[Максим Тимофеев]

$('.find_grid').on('click',function(){
  $(this).find('.тоЧтоНадоОткрыть').toggleClass('hidden');
});

"тоЧтоНадоОткрыть" замените на свой селектор

[DeniSidorenko]

Максим Тимофеев: Странно, ошибок нет но скрипт не работает :/

[Максим Тимофеев]

DeniSidorenko: покажите код

[DeniSidorenko]

$('.find_grid').on('click',function(){
  $(this).find('.find-category__dropdown').toggleClass('hidden');
});

[Максим Тимофеев]

DeniSidorenko:
сделайте

$('body').on('click','.find_grid',function(){
  console.log('клик');
  $(this).find('.find-category__dropdown').toggleClass('hidden');
});

что бы проверить работает ли клик. Проверьте не перекрывает ли Ваш блок что-то, может клик получает другой элемент

[DeniSidorenko]

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

$('.find-category__item').on('click',function(){
  $(this).children('.find-category__dropdown').toggleClass('hidden');
});

[Максим Тимофеев]

DeniSidorenko:

$('.find-category__item').on('click',function(){
    var to_close = $(this).children('.find-category__dropdown');
    $('.find-category__dropdown').not(to_close).addClass('hidden');
    to_close.toggleClass('hidden');
});

[DeniSidorenko]

Максим Тимофеев: Спасибо Большое Максим за помощь. Очень помогли. Я думал код будет намного длиннее

[DeniSidorenko]

Максим Тимофеев: Максим подскажите пожалуйста немного с вашим скриптом, как сделать что бы при клике на этот елемент .find-category__item ; grid-md-row (класс который на два уровня высше по DOM) получал padding-bottom: 100px; а если нажимаю на другой то уже тот получает а этот получает padding-bottom:0; Крч элемент который показывается ему родителю на 2 уровня высше дать 100px padding bottom

[Максим Тимофеев]

$(this).closest('.someSelector').css('padding','100px');

[DeniSidorenko]

Максим Тимофеев: Работает только если скрываю то padding не уберается.

[DeniSidorenko]

Максим Тимофеев: Решил через условия проверяя на hasClass