const toggles = document.querySelectorAll('.lang-toggle') toggles.forEach(toggle => { toggle.addEventListener('click', () => { toggle.parentNode.classList.toggle('активный') }) }) .lang-toggle { цвет фона: прозрачный; граница: 0; радиус границы: 50%; курсор: указатель; размер шрифта: 16 пикселей; заполнение: 0; позиция: абсолютная; верх: 60 пикселей; справа: 30 пикселей; высота: 30 пикселей; ширина: 30 пикселей; } .lang-toggle:focus { контур: 0; } .lang-toggle .fa-times { дисплей: нет; } .lang.active .lang-toggle .fa-times { цвет: #fff; дисплей: блок; } .lang.active .lang-toggle .fa-chevron-down { дисплей: нет; } .lang.active .lang-toggle { цвет фона: #9fa4a8; } .lang { цвет фона: прозрачный; граница: сплошная 1 пиксель #9fa4a8; радиус границы: 10 пикселей; поле: 20 пикселей 0; отступ: 30 пикселей; положение: относительное; переполнение: скрыто; переход: легкость 0,3 с; } .language-frame-desktop { ширина: 90%; поле слева: 5%; поле сверху: 12 пикселей; высота: 60 пикселей; дисплей: гибкий; гибкое направление: строка; оправдание-содержание: пространство между; выровнять-элементы: по центру; отступ: 6 пикселей; } .language-desktop { поле: 6 пикселей; высота: 24 пикселей; оправдание-содержание: слева; размер шрифта: 20 пикселей; вес шрифта: 500; высота строки: 24 пикселей; черный цвет; } .language-контейнер { поле слева: 5%; ширина: 90%; нижняя граница: 2 пикселя, сплошная #c8c8cb; дисплей: нет; гибкое направление: строка; оправдание-содержание: пространство вокруг; } .language-name-box-desktop { граница: сплошная 1 пиксель #f0f0f0; ширина: 122 пикселей; отступ: 6 пикселей; гибкое направление: столбец; цвет фона: #f7f7f9; радиус границы: 12 пикселей; выровнять-элементы: гибкий старт; Переключение языка Языки
JavaScript
HTML
CSS
Все коды предоставлены. Изображения находятся в моем локальном каталоге..
Я ожидаю, что при щелчке по значку шеврона отобразятся языки с их форматированием и контейнер развернется. и при нажатии на значок крестика контейнер закрывается. Я ПРОБОВАЛ ВСЕ МЕТОДЫ, НО НЕТ OSE.. Я ТАКЖЕ ИСПОЛЬЗУЮ МНОГИЕ МЕТОДЫ ДЛЯ ПРЕОДОЛЕНИЯ ЭТОЙ ПРОБЛЕМЫ, НО ОНО НЕ РАБОТАЕТ. Пожалуйста, помогите мне решить эту проблему.
Мобильная версия