У меня есть 4 категории в виде списка; Все, Урбанизм, Архитектура и Дизайн Интерьера. Урбанизм, архитектура и дизайн интерьера имеют подкатегории в виде списка. Код одновременно фильтрует изображения и отображает подкатегории. У меня проблема в том, что всякий раз, когда я нажимаю «Урбанизм», «Архитектура» или «Дизайн интерьера», чтобы отобразить подкатегории; весь блок поднимается вверх.
Я хочу, чтобы все элементы «Урбанизм», «Все», «Архитектура» и «Дизайн интерьера» оставались на одной горизонтальной линии, даже когда я нажимаю на любую категорию, чтобы отобразить подкатегории. Я хочу, чтобы подкатегории находились ниже родительской категории, когда я нажимаю на нее. Ваша помощь будет оценена по достоинству. Ниже приведен мой код:
проекты
- Все
- Урбанизм Масштаб города
- Жилой
- Развлечения
[*] Архитектура
- Администратор
- Коммерческий
- Гостеприимство
- Жилой
- Образовательные
- Культурный
- Развлечения
- Медицинский
- Религиозные
- Восстановление
- Инфраструктура
[*] Дизайн интерьера
- Жилой
- Коммерческий
- Культурный
let switcherLi = document.querySelectorAll(".switcher li"); пусть imgs = Array.from(document.images); switcherLi.forEach((li) => { li.addEventListener("клик", RemoveActive); li.addEventListener("клик", фильтр); }); функция удаленияАктив () { switcherLi.forEach((li) => { li.classList.remove("активен"); this.classList.add("активный"); }); } функция фильтра() { imgs.forEach((img) => { if (!img.classList.contains("логотип")) { img.style.display = "нет"; } }); document.querySelectorAll(this.dataset.cat).forEach((el) => { el.style.display = "блокировать"; }); } var UrbanismElement = document.getElementById("показать"); var contentElement = document.getElementById("content"); UrbanismElement.onclick = функция (событие) { if (event.target === UrbanismElement) { if (contentElement.style.display === "нет") { contentElement.style.display = "блокировать"; Archcontent.style.display = «нет»; // Скрыть подкатегории архитектуры intcontent.style.display = "нет"; // Скрыть подкатегории дизайна интерьера } еще { contentElement.style.display = «нет»; } } }; var Archelement = document.getElementById("showarch"); vararchcontent = document.getElementById("contentarch"); Archelement.onclick = функция (событие) { if (event.target === археэлемент) { if (archcontent.style.display === "нет") { Archcontent.style.display = "блокировать"; contentElement.style.display = «нет»; // Скрыть подкатегории урбанизма intcontent.style.display = "нет"; // Скрыть подкатегории дизайна интерьера } еще { Archcontent.style.display = «нет»; } } }; var intelement = document.getElementById("showint"); var intcontent = document.getElementById("contentint"); intelement.onclick = функция (событие) { if (event.target === intelement) { if (intcontent.style.display === "нет") { intcontent.style.display = "блокировать"; contentElement.style.display = «нет»; // Скрыть подкатегории урбанизма Archcontent.style.display = «нет»; // Скрыть подкатегории архитектуры } еще { intcontent.style.display = "нет"; } } }; var allElement = document.querySelector('.switcher li[data-cat=".all"]'); var CategoryElements = document.querySelectorAll(".switcher li[data-cat]"); allElement.onclick = функция (событие) { если (event.target === allElement) { for (var i = 0; i а { отображение: содержимое; } .галерея изображения { ширина: 0; высота: 0; минимальная высота: 100%; минимальная ширина: 100%; объектное соответствие: обложка; курсор: указатель; фильтр: оттенки серого (80%); переход: линейный 0,35 с; } .gallery img:hover { фильтр: оттенки серого (0); ширина: Calc(var(--s) * var(--f)); высота: Calc(var(--s) * var(--f)); } тело { маржа: 0; дисплей: сетка; место-содержание: центр; } .контейнер { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; } @media screen и (максимальная ширина: 700 пикселей) { div.large { дисплей: нет; } } /***** для мобильных телефонов *****/ @media (минимальная ширина: 699 пикселей) { .cont { дисплей: нет; } } @media (минимальная ширина: 699 пикселей) { div.small { дисплей: нет; } } .сетка { дисплей: сетка; Grid-template-columns: повторение (автозаполнение, minmax (200 пикселей, 1fr)); разрыв сетки: 20 пикселей; выровнять-элементы: растянуть; } .grid изображение { граница: 1 пиксель, сплошная #ccc; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); максимальная ширина: 100%; поле слева: 5 пикселей; } .сетка { дисплей: сетка; столбцы-шаблона сетки: повторение (1, 1fr); оправдание-содержание: центр; разрыв: 10 пикселей; } .grid div { максимальная высота: 300 пикселей; } .переключатель { маржа: 0 авто; дисплей: гибкий; flex-wrap: обертка; оправдание-содержание: центр; выровнять-элементы: по центру; стиль списка: нет; ширина: подходящее содержимое; отступ: 10 пикселей 10 пикселей; } .switcher ли { радиус границы: 4 пикселя; отступ: 10 пикселей 10 пикселей; цвет фона: белый; курсор: указатель; переход: линейный 0,2 с; размер шрифта: 12 пикселей; выбор пользователя: нет; поле: 5 пикселей; оправдание-содержание: центр; выровнять-элементы: по центру; дисплей: гибкий; отображение: встроенный блок; курсор: указатель; } .content div { дисплей: нет; маржа сверху: 10 пикселей; }
Мобильная версия