トグルボックスはボタンでは動作しませんが、段落

Question

で動作していますが、<p>タグの代わりに<button>タグを挿入すると、メニュー全体が機能しませんが、<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>