$(() => {
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>