Сообщение от рони
|
Aruta,
|
Неделю делал это... фуууф.
Добавляю код - дописал его всё же до конца и правильно работает
const buttons = document.querySelectorAll('.results__filter-inner>li');
const subMenuAll = document.querySelectorAll('.filter__name__list-wrap');
let activeBorderColor ='rgb(255, 123, 172)';
let activeColor = 'rgb(34, 7, 24)';
//функция HIDE всех нужных блоков по классу
const dnoneStyle = () => {
subMenuAll.forEach((dnone) => {
dnone.style.display = "none";
});
}
const disActive = () =>{
for (let i=0; i<buttons.length; i++){
if (buttons[i].classList.contains('active-show')){
buttons[i].classList.remove('active-show');
}
}
}
//Закрытие меню при клике вне меню
const closeFilter = () => {
document.addEventListener('click', e => {
if(!buttons.target) {
subMenuAll.forEach((e) => {
dnoneStyle()
})
}
disActive()
})
}
// Открытие/закрытие подменю при нажатии на название фильтра
buttons.forEach((elem) => {
let subMenu = elem.querySelector('.filter__name__list-wrap');
let clear = elem.querySelector('.clear');
const activeFilter = () =>{
// elem.classList.toggle('active-show');
buttons.forEach( (chbx) => {
let inputs = chbx.querySelectorAll('input');
for (let i=0; i<inputs.length; i++){
inputs[i].onchange = () =>{
let inputParent = chbx.closest('li'); //обращаемся к родителю элемента
if (!inputs[i].checked){
inputParent.classList.remove('active-filter');
inputs[i].classList.remove('active_param');
} else {
inputParent.classList.add('active-filter');
inputs[i].classList.add('active_param');
}
}
}
});
}
elem.addEventListener('click', (subElem) => {
const filterButtons = () => {
subElem.stopPropagation();
//если имеется выпадающий список у фильтра
if (subMenu){
if (subMenu.style.display != "block"){
dnoneStyle();
subMenu.style.display = "block";
//перебор checkbox, чтобы отмечался только один в фильтре
let inputs= elem.getElementsByTagName('input');
for (var i = inputs.length-1; i >= 0; -- i) {
inputs[i].onclick = function () {
for (var j = inputs.length-1; j >= 0; -- j) {
if (inputs[j] != this) inputs[j].checked = false;
}
}
}
activeFilter();
//запрет на всплытие клика выше выпадающего списка, т.е. не будет срабатывать на родителе.
subMenu.addEventListener('click', (g) => {
g.stopPropagation();
});
} else {
dnoneStyle();
}
} else { //если нет выпадающего списка у фильтра
dnoneStyle();
return;
}
}
//снятие окраски фильтра, если он не активен или он не ракскрыт
if (!clear){
for (let i = 0; i<buttons.length; i++){
if(!elem.classList.contains('active-show')){
elem.classList.toggle('active-show');
} else {
disActive()
}
}
}
//применяем функцию фильтров
filterButtons();
//сброс активных фильтра - CLEAR
if (clear){
for (let i=0; i<buttons.length; i++){
buttons[i].classList.remove('active-filter');
buttons[i].classList.remove('active-show');
}
buttons.forEach( (chbx) => {
let inputs = chbx.querySelectorAll('input');
for (let i=0; i<inputs.length; i++){
inputs[i].classList.remove('active_param');
inputs[i].checked = false;
}
})
}
});
});
closeFilter();