Показать сообщение отдельно
  #15 (permalink)  
Старый 22.10.2020, 06:43
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 83

Сообщение от рони Посмотреть сообщение
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();

Последний раз редактировалось Aruta, 22.10.2020 в 10:19.
Ответить с цитированием