HTML中点击按钮控制fieldset显示/隐藏功能失效问题求助

错误原因 #

你的<button>元素放在<form>标签内部，未显式指定type属性的按钮默认是submit类型，点击后会触发表单提交行为，导致页面刷新。你通过JS修改的元素显隐状态会随着页面重载被重置为初始的隐藏状态，因此会出现内容闪现后消失的现象。

解决方案 #

你可以任选以下一种方法修复：

方案1：明确按钮类型 #

给添加type="button"属性，指定它为普通按钮，不会触发表单提交：

<button onclick="myFunction()" id="myBtn" type="button">Read more</button>

方案2：阻止默认提交行为 #

在点击事件回调中阻止表单提交的默认行为，修改对应代码：
JS部分：

function myFunction(e) {
  e.preventDefault();
  var f1 = document.getElementById("f1");
  f1.style.display = "block";
}

HTML部分：

<button onclick="myFunction(event)" id="myBtn">Read more</button>

内容的提问来源于stack exchange，提问作者online-weber