显示块隐藏/显示 onClick 仅适用于表单

编程问答 2022-05-16

问题描述

我正在尝试理解并让以下隐藏/显示切换正常工作。

隐藏/显示脚本仅在 onclick 按钮位于

元素之外时才起作用。如果我把按钮放在里面，那么 div 就不会隐藏，它会隐藏一会儿然后又回来了。谁能帮我弄清楚我做错了什么以及如何让它在表单元素中工作？

已测试浏览器：Chrome、Vivaldi、FireFox、Safari、Maxthon、Brave、Opera、Roccat

我的代码是

<head>
<title>Toggole Hide Show Button</title>
</head>
<body>
<h1>Hide Show Button</h1>
<br><br>
<br><br>
<form>
<input type="hidden" name="zz" value="abc">
<div id="toggle-div">
    Lorem Adipiscing Elit<br><br>
    Lorem Ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
    veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
</div>
<button onclick="myFunction()">Hide Show</button><br>
<input type="submit" value="Save Form">
</form>
</body>
</html>
<script>
    function myFunction(){
        var x=document.getElementById("toggle-div");
        if (x.style.display === "none") {
            x.style.display= "block";
        }else{
            x.style.display = "none";
        }
    }
</script>```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

formsformsformshideonclickonclickonclickshowtoggle