如何使用JavaScript隐藏表单div的一部分？

我从这个平台获得了一些代码，并实现了它来隐藏我的formdiv元素的一部分。不过，它可以工作，但当我在浏览器中运行它时，它看起来会隐藏和取消隐藏。当我点击按钮隐藏它时，它会快速隐藏和取消隐藏。我如何解决这个问题

我尝试过的代码如下所示：

.hide{
显示：无！重要；
可见性：隐藏！重要；
}
.表演{
显示：块；
能见度：可见；
}

$（文档）.ready（函数（）{
//log（'hello'）；
$（“#btn”）。在（“单击”，函数（）{
$（“#form1”）.addClass（“隐藏”）；
})
});
//document.getElementById（“form1”）.style.visibility=“hidden”；
//document.getElementById（“form1”）.style.display=“无”；
名称



电子邮件
更多

此代码中有很多需要更改的地方，但是如果您只是想让它工作，您可以将您的按钮放到表单之外，或者将您的事件侦听器替换为以下内容：

$("#btn").on("click", function(e){
  $("#form1").addClass("hide");
  e.preventDefault();
})

---

之所以发生这种情况，是因为您的按钮正在提交表单并刷新页面

此代码中有很多地方需要更改，但如果您只是想让它正常工作，您可以将按钮从表单中删除，或者将事件侦听器替换为以下内容：

$("#btn").on("click", function(e){
  $("#form1").addClass("hide");
  e.preventDefault();
})

---

这是因为您的按钮正在提交表单并刷新页面

按钮类型应为

type=“button”

---

更多

按钮类型应为

type=“Button”

---

更多

我已将您的代码转换为一个可工作的代码段-它似乎工作得很好。你能提供一个片段来说明这个问题吗？@freedomn-m你的编辑帮助解决了这个问题——即按钮提交了它所在的表单，这是按钮惯常做的事情。这将产生表单元素“隐藏和取消隐藏”的感知行为。解决方案是将事件挂接到非按钮元素，或者

返回false。我发布的代码是我运行的代码，但似乎没有perfect@AndreasEriksson感谢您指出这一点-我更改了它，这样它就不会试图在代码段上发布。它无意在试图复制时“修复”该问题。请将按钮从
more
更改为
more
，否则它会尝试提交表单，重新加载页面，取消隐藏您的输入。我已将您的代码转换为工作片段-它似乎工作正常。你能提供一个片段来说明这个问题吗？@freedomn-m你的编辑帮助解决了这个问题——即按钮提交了它所在的表单，这是按钮惯常做的事情。这将产生表单元素“隐藏和取消隐藏”的感知行为。解决方案是将事件挂接到非按钮元素，或者
返回false。我发布的代码是我运行的代码，但似乎没有perfect@AndreasEriksson感谢您指出这一点-我更改了它，这样它就不会试图在代码段上发布。它无意在试图重现问题时“修复”该问题。请将您的按钮从
more
更改为
more
，否则它会尝试提交重新加载页面的表单，从而取消隐藏您的输入。