Создание отзывчивых интерфейсов аккордеонов

JavaScriptJavaScriptBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом проекте вы научитесь создавать простой складной аккордеон с использованием HTML, CSS и JavaScript. Складной аккордеон - это распространенный элемент пользовательского интерфейса, который позволяет пользователям разворачивать и сворачивать разделы содержания, что делает его полезной функцией для отображения информации в компактной и организованной форме.

👀 Превью

Анимация демо аккордеона

🎯 Задачи

В этом проекте вы научитесь:

  • настраивать HTML-структуру для складного аккордеона;
  • стилизовать аккордеон с использованием CSS;
  • добавлять интерактивность в аккордеон с использованием JavaScript.

🏆 Достижения

После завершения этого проекта вы сможете:

  • создавать отзывчивый и визуально привлекательный интерфейс аккордеона;
  • использовать JavaScript для добавления интерактивности и динамического поведения веб-элементов;
  • интегрировать HTML, CSS и JavaScript для создания функционального и удобного для пользователя веб-компонента.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/dom_select -.-> lab-445654{{"Создание отзывчивых интерфейсов аккордеонов"}} javascript/dom_manip -.-> lab-445654{{"Создание отзывчивых интерфейсов аккордеонов"}} javascript/event_handle -.-> lab-445654{{"Создание отзывчивых интерфейсов аккордеонов"}} end

Настройка структуры проекта

В этом шаге вы настроите проект, открыв предоставленные файлы в редакторе.

  1. Откройте редактор, и вы должны увидеть следующие файлы: index.html, style.css, index.js и jquery-3.6.0.min.js.
  2. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.
  3. Откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу. Нажатие на изображение на свернутой странице не разворачивает его. Вы можете увидеть это, как показано ниже:
Скриншот незавершенного проекта

Добавление интерактивности с использованием jQuery

В этом шаге вы добавите интерактивность в аккордеон с использованием jQuery.

  1. Откройте файл index.js в редакторе.
  2. Добавьте следующий код:
$(".option").click(function () {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

Этот код добавляет обработчик события клика для каждого элемента .option. Когда элемент .option нажимается, код удаляет класс active из всех элементов .option и добавляет класс active к нажатому элементу .option. Это позволит свернуть или развернуть аккордеон по необходимости.

  1. Сохраните файл index.js.
  2. Обновите браузер, чтобы увидеть окончательный результат.
  3. Нажмите на разные варианты аккордеона, чтобы увидеть, как они разворачиваются и сворачиваются.

Эффект выглядит так:

Демонстрация разворачивания и сворачивания аккордеона

Поздравляем! Вы завершили проект по созданию складного аккордеона.

✨ Проверить решение и практиковаться

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.