Не могу модифицировать скрипт?

313

18 сентября 2017, 05:35

При нажатий на блок открывается его dropdown. Всего блоков 12, соответственно 12 dropdown. Таким кодом я показываю элемент и тут же вторая часть скрипта скрывает блок который ранее был открыт. Скрипт работает но не могу модифицироват таким образом что если я нажму на него еще раз( т.е когда он открытый) повторно он не закроется. Закрывается только за пределы его блока если нажимаю, либо на другой блок( а тот открывает свой dropdown). скорее тут требуется создать переменную которая отвечала бы за состояния блока.

Как задать состояние именно к блоку который открылся?

$('.find-category__item').on('click',function(){
    var to_close = $(this).children('.find-category__dropdown');
    to_close.toggleClass('hidden');
    $(document).mouseup(function (e){ // событие клика по веб-документу
    $('.find-category__dropdown').addClass('hidden');
    });
});

Answer 1

Не нравится мне когда на странице с хода создаются блоки с .hidden, по этому поменял немного логику. Плюс я уверен, что это можно проапгрейдить, но почему-то я не могу в данный момент, поэтому пока так:

$(() => { 
  let currentCategory = -1; // Переменная хранящая индекс текущей категории 
  const $category = $('.find-category'), 
    $categoryItems = $category.find('.find-category__item'), 
    $categoryDropdowns = $category.find('.find-category__dropdown'); 
     
  $categoryItems.on('click', toggleCategories); 
 
  function toggleCategories() { 
    const $this = $(this), 
      $dropdown = $this.find('find-category__dropdown'), 
      index = $categoryItems.index($this); 
     
    if(index !== currentCategory) { // Проверяем активна ли так категория по которой мы кликнули 
      $categoryDropdowns.removeClass('show'); // Скрываем все категории 
      $categoryDropdowns.eq(index).addClass('show'); // Показываем категорию по которой кликнули 
      currentCategory = index; // Задаем переменной индекс категории по которой кликнули 
      $('body').on('click', hideCategoriesOnBodyClick); // Включаем слушатель клика по body 
    } else { 
      hideAllCategories(); // Скрываем все категории 
      $('body').off('click', hideCategoriesOnBodyClick); // Отключаем слушатель клика по body 
    } 
  } 
   
  function hideCategoriesOnBodyClick( e ) { 
    if($(e.target).closest('.find-category__item').length === 0) hideAllCategories(); // Проверяем является ли то по чему мы кликнули .find-category__item или его дочерним элементом 
  } 
   
  function hideAllCategories() { 
    $categoryDropdowns.removeClass('show'); // Скрываем все категории 
    currentCategory = -1; // Задаем индекс который не равен индексу ниодного элемента в $categoryItems (так как индексы начинаются с 0, ибо это не селекторный индекс) 
  } 
});

.find-category { 
  width: 300px; 
} 
 
.find-category__dropdown { 
  display: none; 
} 
 
.find-category__dropdown.show { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="find-category"> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
  <div class="find-category__item"> 
    <p class="find-category__item-name"> 
      Категория 
    </p> 
    <div class="find-category__dropdown"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Если условие выполнено, то открыть окно

Есть два input, если в оба инпута ввели правильные данные допустим в первый input "123", а во второй input "123ABC" и если все правильно, показать модульное...

442

javascript

Как прикреплять файлы в форме обратной связи поочередно?

В форме обратной связи есть возможность прикреплять к письму файлы

290

javascript

как найти елементы по классу в обьекте

как можно найти елементы по классу используя обьекты, проблема с этим кодом что он не находим елементы которые мы задаем в var rect = new Rectangle("elem",...

327

javascript

Простой калькулятор на javascript

Требуется создать простой калькулятор расчета стоимости для сайта

366