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类。

＆＃13;

// 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");
});

＆＃13;

#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');
  }
}

＆＃13;

<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>

＆＃13;

在Javascript下拉菜单上需要帮助

1 个答案: