Question

我尝试制作切换菜单，但是当我插入<button>代码而不是<p>代码时，整个菜单都不起作用，但它适用于<p>。< / p>

我该如何解决这个问题？

段：

function toggleMenu() {
  var menuBox = document.getElementById('menu-box');
  if (menuBox.style.display == "block") { // if is menuBox displayed, hide it
    menuBox.style.display = "none";
  } else { // if is menuBox hidden, display it
    menuBox.style.display = "block";
  }
}

<div id="infobox2">
  <form action="index.html" method="get">
    <p onclick="toggleMenu()" id="menu"> Skapa konto </p>
    <ul id="menu-box" style="display: block">
      <li><a href="index.html">Start</a></li>
      <li><a href="animal.html">Animal</a></li>
      <li><a href="pictures.html">Pictures</a></li>
    </ul>
  </form>
</div>

Answer 1

按钮标记的默认行为是发送表单。这就是重新加载页面的原因。如果您不希望按钮发送表单，则必须指定type属性。

<button type="button">Toggle</button>

进一步阅读：

https://www.w3schools.com/tags/att_button_type.asp

特别是这部分：

提示：始终指定元素的type属性。不同的浏览器可能使用不同的默认类型元件。

Answer 2

您必须阻止该按钮的默认行为。只需在您的函数中添加return false即可。

function toggleMenu() {
  var menuBox = document.getElementById('menu-box');
  if (menuBox.style.display == "block") { // if is menuBox displayed, hide it
    menuBox.style.display = "none";
  } else { // if is menuBox hidden, display it
    menuBox.style.display = "block";
  }
  return false;
}

<div id="infobox2">
  <form action="index.html" method="get">
    <p onclick="toggleMenu()" id="menu"> Skapa konto </p>
    <button onclick="toggleMenu()" id="menu1">Skapa konto1</button>
    <ul id="menu-box" style="display: block">
      <li><a href="index.html">Start</a></li>
      <li><a href="animal.html">Animal</a></li>
      <li><a href="pictures.html">Pictures</a></li>
    </ul>
  </form>
</div>

切换框不能使用按钮，但适用于段落

2 个答案: