Question

所以基本上我想保持这个尽可能简单，意思是没有jquery或bootstrap等......只是简单的javascript，HTML和CSS。这就是我到目前为止所拥有的

Javscript：

var menuOptions= document.getElementsByClassName("nav");

var hamburger= document.getElementById("nav-btn");

  function myFunction() {

hamburger.onclick= menuOptions.style.visibility= 'visible';

}

HTML：

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

CSS：

.nav {
  visibility: hidden;
}

除了给我一个解决方案之外，如果你能解释为什么我现在的方法不起作用以及为什么你这样做，我将非常感激。提前谢谢！

Answer 1

两个问题：

getElementsByClassName()返回一个列表，而不是单个元素（尽管列表可能只包含一个元素），并且该列表没有.style属性。您可以使用menuOptions[0]访问列表中的第一个（仅在此情况下）元素。
你不想在你的函数中说hamburger.onclick=，因为那会分配一个新的onclick处理程序，但你的函数已经从{{1}调用了你按钮的属性。（另外，如果您尝试分配新的点击处理程序，则需要onclick。）

因此，对现有代码进行最小程度的更改是为了改变这一行：

hamburger.onclick = function() { /* something */ }

......对此：

hamburger.onclick= menuOptions.style.visibility= 'visible';

在上下文中：

＆＃13;

menuOptions[0].style.visibility = 'visible';

＆＃13;

var menuOptions= document.getElementsByClassName("nav");
var hamburger= document.getElementById("nav-btn");

function myFunction() {
  menuOptions[0].style.visibility = 'visible';
}

＆＃13;

.nav {
  visibility: hidden;
}

＆＃13;

如果您想要反复点击该按钮来打开和关闭菜单显示，那么您可以测试当前的可见性：

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

展开以下内容以查看是否有效：

＆＃13;

  menuOptions[0].style.visibility =
    menuOptions[0].style.visibility === 'visible' ? '' : 'visible';

＆＃13;

var menuOptions= document.getElementsByClassName("nav");
var hamburger= document.getElementById("nav-btn");

function myFunction() {
  menuOptions[0].style.visibility =
    menuOptions[0].style.visibility === 'visible' ? '' : 'visible';
}

＆＃13;

.nav {
  visibility: hidden;
}

＆＃13;

Answer 2

您当前设置无法正常运行的原因有几个：

Document#getElementsByClassName返回一个集合，您将结果视为DOM元素。您需要访问类似[0]的索引才能获得实际元素。
您的切换按钮仅适用于一种方式，因为visibility设置为visible，但再次点击时再也不会回到none。
在myFunction中，hamburger.onclick不应分配给您选择的表达式。我不确定您为什么要尝试分配另一个点击处理程序，但为了使其工作，您需要将其设置为function () { ... }。

现在征求意见：

使用CSS类来控制菜单是否隐藏，而不是搞乱JS中的style属性。运行classList时，您可以将DOM元素的.add()属性用于.remove()，.toggle()和myFunction特定类。我选择使用toggle，因为我认为最适合您的用例。
使用element.addEventListener代替onclick等HTML属性。

段：

var menuOptions = document.getElementsByClassName("nav")[0]

var hamburger = document.getElementById("nav-btn")

hamburger.parentNode.addEventListener('click', function myFunction() {
  menuOptions.classList.toggle('hidden')
})

.nav.hidden {
  visibility: hidden;
}

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

简单的HTML Javascript按钮onclick功能无法正常工作

2 个答案:

段：