需要帮助的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>

我再次只是问对于为什么nav-btn的下拉跨度id没有下拉ul的内容的建议一切正常。谢谢！

答

您正在尝试切换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>

谢谢你这么多的资产净值悬停修复和快速反应！不幸的是，这仍然不起作用。当我运行你的代码片段时，它工作，但它不工作在我的最后（我已经检查了语法错误）。首先，为什么我需要value =“ - - - ”（为什么这会出现我希望图像是折叠按钮），为什么用.hide替换li？现在列表总是可见的。谢谢你第一次回答我的问题。祝你有美好的一天！ – MJCarnahan

我只加了'value = ---'，这样你就可以看到这里的东西，因为我们没有访问你的图像。另外，关于你在做什么并不完全清楚，所以我的答案是给你一个如何实现这样的实例的工作示例。你引用了一个“演出”类，但实际上并没有。 –

需要帮助的Javascript下拉菜单

相关推荐