javascript 如何仅在单击按钮时显示带有表单的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16195942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I show a div with a form only if a button is clicked?
提问by AB Bryan
I have a table inside a div that contains a form for the user to fill out. Above the div is a button that says "Customer info". I want to show the form only if the customer wants to fill out the information. The idea is that if they want to fill it out they can click the button and the form will appear below. There are many of these sections so I only want the customer to have to see what they want to see. Below is an example...
我在 div 中有一个表格，其中包含一个供用户填写的表单。div 上方是一个按钮，上面写着“客户信息”。我只想在客户想要填写信息时显示表单。这个想法是，如果他们想填写，他们可以点击按钮，表格就会出现在下面。这些部分有很多，所以我只希望客户必须看到他们想看到的内容。下面是一个例子...
<input type="button" value="Customer Info" onClick="">
<div>
<form>
<table>
<tr>
<td>Name:<input type="text" value="" id="name" name="name"></td>
</tr>
</table>
</div>
My question is how can I write a simple javascript function that will act upon clicking the button that will show and hide the Div? The form would still be there just hidden and the values would just be blank.
我的问题是如何编写一个简单的 javascript 函数，该函数将在单击将显示和隐藏 Div 的按钮时起作用？表单仍然会隐藏在那里，并且值只是空白。
回答by What have you tried
You can use the onClickevent to do that:
您可以使用该onClick事件来做到这一点：
Working Example
工作示例
HTML:
HTML：
<button id="some_id">Hide div</button>
<form id="some_form">
<form>
javascript:
javascript:
<script type="text/javascript">
var theButton = document.getElementById('some_id');
theButton.onclick = function() {
document.getElementById('some_form').style.visibility='hidden';
}
</script>
回答by Xotic750
Inline javascript is considered bad practice
内联 javascript 被认为是不好的做法
ie. onClick=""
IE。 onClick=""
Use something like this instead
改用这样的东西
<input id="info" type="button" value="Customer Info">
<div id="myDiv">
<form>Name:
<input type="text" value="" id="name" name="name">
</input>
</form>
</div>
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
on jsfiddle
Here is the code suggested by David Thomas in the comments. It performs exactly the same task, but uses shorthand if-else for the togglefunction and doesn't provide you with separate showand hidefunctions.
这是 David Thomas 在评论中建议的代码。它执行完全相同的任务，但对toggle函数使用速记 if-else，并且不为您提供单独的show和hide函数。
<input id="info" type="button" value="Customer Info">
<div id="myDiv">
<form>Name:
<input type="text" value="" id="name" name="name">
</input>
</form>
</div>
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function toggle() {
myDiv.style.visibility = myDiv.style.visibility === "hidden" ? "visible" : "hidden";
}
toggle();
button.addEventListener("click", toggle, false);
on jsfiddle
回答by Arun
<script type="text/javascript">
$("#music").click(function () {
$("#musicinfo").show("slow");
});
</script>
you can change effect like as toggle, fadeToggle in place of show...
您可以更改效果，如切换、fadeToggle 代替显示...
