单击时手风琴标题刷新页面[重复]答案

【问题标题】：Accordion header refreshes page when clicked [duplicate]单击时手风琴标题刷新页面[重复]
【发布时间】：2018-01-14 09:59:58
【问题描述】：

我从 w3school here 实现了下面的手风琴代码，并将其包装在 form 标记中。当我尝试运行它时，我单击了手风琴标题，页面不断刷新。如何防止这种情况？以下是我基于 w3school 的代码。

<form name="formone" method="post" action="file.php">
<button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">Vehicle</button>
<div id="Demo1" class="w3-container w3-hide">
  <input type="checkbox" name="vehicle" value="Bike"> Bike<br>
  <input type="checkbox" name="car" value="Car"> Car<br>
</div>
<button onclick="myFunction('Demo2')" class="w3-btn w3-block w3-black w3-left-align">Distance</button>
<div id="Demo2" class="w3-container w3-hide">
  <input type="checkbox" name="distance" value="m"> Metre<br>
  <input type="checkbox" name="distance" value="km"> KM<br>
</div>
<br>
<button type="submit" name="submit">Submit</button>
</form>

</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

这是我的JSFiddle

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您必须在按钮元素中提供type tag 以指定它不是提交按钮

<button type="button">

https://jsfiddle.net/e3raaywm/1/

【讨论】：