Вместо
.filter-values класс лучше переключать у их самых дальних не общих предков, т.е., у
.material-block. В этом случае не надо искать внутри контейнера элемент, у которого должен быть переключен класс, а если в будущем захотите внутри открытого
.material-block стилизовать ещё какой-то элемент, то не придётся переписывать js-код.
Так что стили немного поправим:
- .material-block .filter-values.open {
+ .material-block.open .filter-values {
У кого надо переключать класс, по клику на какой элемент внутри надо переключать класс, что за класс:
const containerSelector = '.material-block';
const buttonSelector = `${containerSelector} .catalog-filter-block-title`;
const activeClass = 'open';
Вот jquery, как вы и хотели:
$(document).on('click', ({ target: t }) => {
const $container = $(t).closest(containerSelector);
const $button = $(t).closest(buttonSelector);
if ($button.length) {
$container.toggleClass(activeClass);
}
$(containerSelector).not($container).removeClass(activeClass);
});
Или, к чёрту jquery:
document.addEventListener('click', ({ target: t }) => {
const container = t.closest(containerSelector);
const button = t.closest(buttonSelector);
if (button) {
container.classList.toggle(activeClass);
}
document.querySelectorAll(containerSelector).forEach(n => {
if (n !== container) {
n.classList.remove(activeClass);
}
});
});
