在Javascript下拉菜單上需要幫助

Question

所以基本上我無法弄清楚為什么這個菜單不會下拉當我點擊漢堡包圖標，任何幫助將不勝感激

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的內容的建議，其他一切正常。 謝謝！

Answer 1

您正在嘗試切換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 { display: none; } @media (max-width: 1099px) { .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 { 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>

在Javascript下拉菜單上需要幫助

問題描述

1 個解決方案

解決方案1
0 2017-02-19 23:21:02

在Javascript下拉菜單上需要幫助

問題描述

1 個解決方案

解決方案1 0 2017-02-19 23:21:02

解決方案1
0 2017-02-19 23:21:02