JS не открывает кнопку, как предполагалось
Я работаю над разделом заголовка в HTML и решил изучить JavaScript в этом проекте. Я также использую TailwindCSS, но некоторые особенности я включил в другой файл .css.
Я получил код JS от w3schools и адаптировал его под свою текущую настройку.
Я не совсем понимаю, почему меню не открывается при нажатии кнопки.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "output.css">
<link rel = "stylesheet" href = "alt.css">
</head>
<body style = "background-color: #171614;">
<script>
function menudd() {
document.getElementById(menu-main).classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.menub')) {
var dropdowns = document.getElementsByClassName("ddcontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<div class = "flex bg-prim py-1">
<button onclick = "menudd()" class = "menub p-2 ml-2"><img src = "./content/logowhite.png" width = "50" height = "50"></button>
<div id = "menu-main" class = "ddcontent absolute bg-sec-orange mx-5 min-w-40 z-1">
<ul>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">a</li>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">b</li>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">c</li>
</ul>
</div>
<div class = "relative hidden lg:flex items-center ml-auto pr-6">
<nav class = "text-sm leading-6 font-semibold text-bone">
<ul class = "ddcontent flex space-x-8">
<li><a class = "bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Artists</a></li>
<li><a class = "bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
И вот alt.css
.bg-prim {
background-color: #7a1d00;
}
.bg-sec-orange {
background-color: #ba3f1d;
}
.bg-sec-grey {
background-color: #545f71;
}
.text-bone {
color: #ece2d0;
}
.nav-button:hover {background-color: #7A1D00; transition: background-color 100ms ease-in-out;}
#menu-main {
display: none;
}
.show {display: block;}
Я пробовал много разных вещей, например, экспериментировал с Tailwind и даже вводил свои собственные строки CSS, однако я не совсем уверен, что мне нужно, чтобы все работало так, как задумано.
Вы неправильно импортируете id, используйте двойные или одинарные кавычки, например ("menu-main").
—
20.07.2024 07:17
В вашем коде есть несколько проблем. вам нужен упрощенный и лучший способ сделать это или по какой-то причине вы хотите, чтобы ваш собственный код был исправлен? Я отвечу соответственно.
—
20.07.2024 22:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
71
4
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 4
Я только что импортировал ваши значения CSS в HTML-файл внутри тега стиля . Позже вы также можете использовать его в отдельном файле. Чтобы было понятно, я оставляю весь код, как объяснил в КОММЕНТАРИЯХ. Важные правила, которые вам следует знать: Специфика CSS , !important , Выбор идентификатора
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "output.css">
<link rel = "stylesheet" href = "alt.css">
<style>
.bg-prim {
background-color: #7a1d00;
}
.bg-sec-orange {
background-color: #ba3f1d;
}
.bg-sec-grey {
background-color: #545f71;
}
.text-bone {
color: #ece2d0;
}
.nav-button:hover {background-color: #7A1D00; transition: background-color 100ms ease-in-out;}
#menu-main {
display: none; /* YOU ARE GIVING VALUE FOR ID SELECTOR WHICH OVERRIDES VALUES OF CLASS, EVEN IF THEY ARE ADDED LATER(IN YOUR CASE 'show')*/
}
.show {display: block !important;} /* BUT ONLY WAY YOU CAN USE '!important' TO OVERRIDE ANY PREVIOUS STYLES*/
</style>
</head>
<body style = "background-color: #171614;">
<script>
function menudd() {
document.getElementById('menu-main').classList.toggle("show");
//PAY ATTENTION WHEN YOU SELECT. THEY SHOULD BE SELECTED INSIDE QUOTATION MARKS "" OR ''.
}
// window.onclick = function(event) {
// if (!event.target.matches('.menub')) {
// var dropdowns = document.getElementsByClassName("ddcontent");
// var i;
// for (i = 0; i < dropdowns.length; i++) {
// var openDropdown = dropdowns[i];
// if (openDropdown.classList.contains('show')) {
// openDropdown.classList.remove('show');
// }
// }
// }
// } WE DO NOT NEED TO CREATE THIS
</script>
<div class = "flex bg-prim py-1">
<button onclick = "menudd()" class = "menub p-2 ml-2"><img src = "./content/logowhite.png" width = "50" height = "50"></button>
<div id = "menu-main" class = "ddcontent absolute bg-sec-orange mx-5 min-w-40 z-1">
<ul>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">a</li>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">b</li>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">c</li>
</ul>
</div>
<div class = "relative hidden lg:flex items-center ml-auto pr-6">
<nav class = "text-sm leading-6 font-semibold text-bone">
<ul class = "ddcontent flex space-x-8">
<li><a class = "bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Artists</a></li>
<li><a class = "bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
**Wrong**
document.getElementById(menu-main).classList.toggle("show");
**Right**
document.getElementById('menu-main').classList.toggle("show");
// menu-main must be in double quotes "menu-main"
Я вставил ваш код в один html-файл и заметил, что вы пропустили кавычки в функции.
document.getElementById("menu-main").classList.toggle("показать");
Другое дело, что я меняю ваш код, возьмите конец страницы с JavaScript и удалите это событие onclik, оно работает хорошо. Когда вы нажимаете кнопку, активируется функция меню, добавляется класс показа, а событие щелчка окна возвращает его обратно. Итак, это работает, но вы не можете видеть.
<div class = "flex bg-prim py-1">
<button onclick = "javascript:menudd()" class = "menub p-2 ml-2"><img src = "./content/logowhite.png" width = "50" height = "50"></button>
<div id = "menu-main" class = "ddcontent absolute bg-sec-orange mx-5 min-w-40 z-1">
<ul>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">a</li>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">b</li>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">c</li>
</ul>
</div>
<div class = "relative hidden lg:flex items-center ml-auto pr-6">
<nav class = "text-sm leading-6 font-semibold text-bone">
<ul class = "ddcontent flex space-x-8">
<li><a class = "bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Artists</a></li>
<li><a class = "bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
<script>
function menudd() {
var elem = document.getElementById("menu-main");
elem.classList.toggle("show");
}
</script>
Ответ принят как подходящий
Ваш код не работает, потому что #main-menu имеет более высокую специфичность, чем .show, поскольку id selectors более специфичен, чем class selectors. См. Специфика W3 School-CSS
Что вам нужно сделать, так это использовать более конкретный селектор, чтобы переопределить свойство display:none объекта #menu-main. Просто используйте #menu-main.show вместо .show.
Кроме того, в коде if (!event.target.matches('.menub')) вы соответствуете .menub, но поскольку ваша кнопка имеет дочернее изображение, нажатие на изображение не откроет меню. Используйте .menub, .menub * там. Это выделит кнопку и все, что находится внутри кнопки.
Наконец, вы пропустили кавычки в document.getElementById()
.bg-prim {
background-color: #7a1d00;
}
.bg-sec-orange {
background-color: #ba3f1d;
}
.bg-sec-grey {
background-color: #545f71;
}
.text-bone {
color: #ece2d0;
}
.nav-button:hover {
background-color: #7A1D00;
transition: background-color 100ms ease-in-out;
}
#menu-main {
display: none;
}
#menu-main.show {
display: block;
}<body style = "background-color: #171614;">
<div class = "flex bg-prim py-1">
<button onclick = "menudd()" class = "menub p-2 ml-2"><img src = "./content/logowhite.png" width = "50" height = "50"></button>
<div id = "menu-main" class = "ddcontent absolute bg-sec-orange mx-5 min-w-40 z-1">
<ul>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">a</li>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">b</li>
<li class = "px-12 py-2 block text-center nav-button cursor-pointer">c</li>
</ul>
</div>
<div class = "relative hidden lg:flex items-center ml-auto pr-6">
<nav class = "text-sm leading-6 font-semibold text-bone">
<ul class = "ddcontent flex space-x-8">
<li><a class = "bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Artists</a></li>
<li><a class = "bg-sec-orange rounded-full p-3 hover:cursor-pointer nav-button">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
<script>
function menudd() {
document.getElementById("menu-main").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.menub, .menub *')) {
var dropdowns = document.getElementsByClassName("ddcontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>Другие вопросы по теме
Как перекрывать гибкие элементы фиксированной ширины?
Как проанализировать дату из данных после загрузки страницы
Требуется ли «rel»="noopener noreferrer"', если внутренняя ссылка будет открыта в новой вкладке?
Список дел с использованием массива и цикла
Безопасен ли межсайтовый скриптинг (XSS) <textarea>.value?
Ссылка на YouTube не работает в скомпилированном файле справки CHM
CSS Grid - сделать следующую строку шириной 100% и равномерно распределить элементы
Как вызвать событие при выборе даты ввода, когда значение не изменилось?
Как изменить цвет тени блока на «размытие» перевернутых углов в CSS
Попытка изменить размер div в процентах от всей страницы
Похожие вопросы
Найдите среднее значение по индексу в матрице
Ошибка выдачи метода renderToString ReactDOMServer:clearProviders не является функцией
Как проанализировать дату из данных после загрузки страницы
Значение localStorage сохраняется и загружается правильно, но не применяется к вводу флажка
Невозможно попасть внутрь цикла for в React js
Как расширить модификатор однорангового узла в Tailwind, чтобы он мог работать на любом одноуровневом сервере?
Список дел с использованием массива и цикла
Безопасен ли межсайтовый скриптинг (XSS) <textarea>.value?
Ссылка на YouTube не работает в скомпилированном файле справки CHM
Почему, когда я отправляю запрос на исправление в Open Weather API в React JS. React сначала вернет мне неопределенное значение, а после этого данные?
у вас появляется ошибка
document.getElementById(menu-main)....etc? Вам следует