С моими прошлыми блогами я подошел к моему текущему проекту, это то, над чем я тратил свое время на работу, простое меню для Петуха, созданное с помощью HTML, CSS и JavaScript. Часть JavaScript будет довольно сложной для меня, чтобы объяснить, поскольку у меня ограниченный опыт перевода JavaScript на современный английский язык. Пожалуйста, оставьте меня, пока я пытаюсь описать, что происходит с моим меню петуха, добавляя к нему JavaScript.
Меню, которое я создал, я хотел, чтобы оно было максимально простым, но с добавлением элегантности. Итак, что я хотел сделать, так это создать простое меню, но чтобы оно анимировало появление и исчезновение при каждом нажатии. Чтобы сделать эту анимацию, мне нужно было создать как CSS, так и JavaScript, чтобы она работала правильно. Часть CSS — это то, что вызывает постепенное появление и исчезновение, в то время как версия JavaScript создает действие или «событие» при нажатии кнопки, чтобы вызвать действие, которое мы хотим. Ниже приведен код, который я написал для запуска события при каждом нажатии на меню.
Начнем с первой части кода. Я создаю прослушиватель событий, который ожидает щелчка, а затем создает константу, которую я назвал dropdownButton, которая соответствует цели события «[data-dropdown-button]», которую я покажу в своем HTML-коде. Вторая строка в коде JavaScript предназначена для случаев, когда цель, ближайшая к раскрывающемуся списку данных, не работает, мы ничего не вернем. С программой ничего не случится.
Здесь мы имеем дело с текущим раскрывающимся списком внутри кнопки раскрывающегося списка if. Таким образом, в основном, если dropdownButton активирован, у нас будет «активный», ну… активный, это будет иметь больше смысла, когда я покажу больше того, что я имею в виду, на примере. Сразу после того, как у нас есть querySelector, есть активное состояние в цикле forEach, и если у нас есть раскрывающийся список, равный currentDropdown, мы вернем… ничего! Если не совпадает, мы удалим активное состояние. Это означает, что мы можем щелкнуть в поле, где у нас есть наши ссылки, поэтому ничего не произойдет и оно не исчезнет. Но когда мы щелкаем за пределами поля параметров, у нас действует classList.remove(‘active’).
Это мой лучший способ объяснить JavaScript в моем проекте меню! Извините, если это не самое лучшее объяснение, но мне бы хотелось получить отзывы о том, как лучше формулировать такие вещи. Еще раз большое спасибо, что заглянули и прочитали мой блог! Хорошего дня и продолжайте кодить!
