Нужна помощь в раскрывающемся меню Javascript

Поэтому в основном я не могу понять, почему это меню не будет выпадающий при нажатии на иконку гамбургер, любая помощь будет принята с благодарностьюНужна помощь в раскрывающемся меню Javascript

Javascript: 

function myFunction(){ 
    var hamburger=document.getElementById('nav-btn') 
    var dropdownContent=document.getElementsByClassName('nav') 


    hamburger.onclick=dropdownContent.classList.toggle("show"); 

    //or hamburger.onclick=dropdownContent.style.display("block"); 
} 


CSS: 
    #nav-btn { 
    display: none; 
    } 

    @media (max-width: 1099px) { 
    li { 
     display: none; 
    } 

    #nav-btn { 
     display: inline; 
     position: absolute; 
     right: 10px; 
     bottom: 110px; 
    } 

    #nav-btn:hover { 
     content: url('Menu.png'); 
    } 


HTML: 
<html> 
<body> 
    <span id="nav-btn"><image src="Menugreen.png" input type="button" onclick="myFunction()"/></span> 
     <div class="nav"> 
     <ul> 
      <li id="Programs"> <a href="Programs.html"> Programs </a> </li> 
      <li> <a href="Tshirts.html"> T-Shirts </a> </li> 
      <li> <a href="About.html"> About </a> </li> 
     </ul> 
     </div> 
</body> 
</html>

Опять я просто спрашиваю для получения информации о том, почему идентификатор dropdown span на nav-btn не раскрывает содержание ul, все остальное работает нормально. Спасибо!

источник

2017-02-19 MJCarnahan

Вы пытаетесь переключить класс show, но не имеете определенного класса show. toggleClass() предназначен для добавления или удаления класса CSS по его названию.

// Get DOM references 
 
var hamburger = document.getElementById('nav-btn') 
 
var dropdownContent = document.querySelector('.nav') 
 

 
// Set up event handler 
 
hamburger.addEventListener("click", function(){ 
 
dropdownContent.classList.toggle("hide"); 
 
});

#nav-btn { 
 
\t display: none; 
 
} 
 

 
@media (max-width: 1099px) { 
 
\t .hide { 
 
    display: none; 
 
    } 
 

 
    #nav-btn { 
 
    display: inline; 
 
    position: absolute; 
 
    right: 10px; 
 
    bottom: 110px; 
 
    } 
 

 
    /* Change the image when you hover over the image, not the span*/ 
 
    #nav-btn > img:hover { 
 
    \t content: url('Menu.png'); 
 
    } 
 
}

<span id="nav-btn"> 
 
    <image src="Menugreen.png" alt="menu"> 
 
    <input type="button" value=" - - -"> 
 
</span> 
 
<div class="nav"> 
 
    <ul> 
 
    <li id="Programs"><a href="Programs.html">Programs</a></li> 
 
    <li> <a href="Tshirts.html">T-Shirts</a> </li> 
 
    <li> <a href="About.html">About</a> </li> 
 
    </ul> 
 
</div>

источник

2017-02-19 23:21:02

Спасибо большое за нав парения исправить и быстрый ответ! К сожалению, это все еще не работает. Когда я запускал фрагмент кода, он работал, но он не работает на моем конце (я уже проверял синтаксические ошибки). Во-первых, зачем мне нужно значение = "- - -" (почему это выглядит, я хочу, чтобы изображение было кнопкой свернуть) и почему вы заменили li на .hide? Теперь список всегда виден. Спасибо, что ушли с первого раза, чтобы ответить на мой вопрос. Имейте великого человека дня! – MJCarnahan

Я только добавил 'значение = ---', чтобы вы могли видеть что-то здесь, так как у нас нет доступа к вашим изображениям. Кроме того, не совсем ясно, что вы делаете, поэтому мой ответ призван дать вам рабочий пример того, как реализовать что-то подобное. Вы ссылались на класс «шоу», но на самом деле его не было. –

Нужна помощь в раскрывающемся меню Javascript

ответ

Смежные вопросы