我从这个平台得到了一些代码并实现了它来隐藏我的表单 div 元素的一部分。但是它可以工作,但是当我在浏览器中运行它时,它看起来像是隐藏和取消隐藏。当我点击按钮隐藏它时,它会快速隐藏和取消隐藏我该如何解决这个问题?
关于我尝试过的代码显示如下:
.hide{
display: none !important;
visibility: hidden !important;
}
.show{
display: block;
visibility:visible;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<html>
<head>
<title>
</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script src="jquery/jquery-3.4.1.slim.min.js"></script>
<link rel="stylesheet" href="test.css">
<script>
$(document).ready(function() {
//console.log('hello');
$("#btn").on("click", function(){
$("#form1").addClass("hide");
})
});
//document.getElementById("form1").style.visibility="hidden";
//document.getElementById("form1").style.display="none";
</script>
</head>
<body>
<form>
<div id= "form1" class="show">
<label>Name</label>
<input type="text"/>
</div>
<br> <br>
<div id="form2">
<label>Email</label>
<input type="text"/>
</div>
<button type="submit" id="btn">more</button>
</form>
</body>
</html>
按钮类型应该是 type="button"
<button type="button" id="btn">more</button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句