用于打开和关闭 div 的 javascript 切换按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5238773/
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
javascript toggle button to open and close a div
提问by phil
How can I get my toggle button to not only change names from view to hide but to also display a table that I have in a div tag?
如何让我的切换按钮不仅将名称从视图更改为隐藏，而且还显示我在 div 标签中的表格？
I currently have the following for my script:
我目前的脚本有以下内容：
<script type = "text/javascript">
function buttonToggle(where,pval,nval)
{
where.value = (where.value == pval) ? nval : pval;
}
</script>
and this is the code for the button:
这是按钮的代码：
<input type="button" name="button1" id="nextbt" value="View " onclick="buttonToggle(this,'View ','Hide ')">
回答by Adrian Macneil
Well if you can use jQuery it would be very easy:
好吧，如果您可以使用 jQuery，那将非常容易：
$('#nextbt').click(function() {
if ($(this).attr('value') == 'show') {
$(this).attr('value', 'hide');
$('#myotherdiv').slideDown();
} else {
$(this).attr('value', 'show');
$('#myotherdiv').slideUp();
}
// or if you don't care about changing the button text, simply:
$('#myotherdiv').slideToggle();
});
More here: http://api.jquery.com/slideToggle/
回答by mVChr
Let's say you add the idof the table you want to show/hide as the relattribute of the button:
假设您添加了id要显示/隐藏的表格作为rel按钮的属性：
<input type="button" name="button1" id="nextbt"
rel="myTable" value="View "
onclick="buttonToggle(this,'View ','Hide ')">
<table id="myTable">
<tr>
<td>myTable</td>
</tr>
</table>
Then you could add the following to your buttonTogglefunction:
然后您可以将以下内容添加到您的buttonToggle函数中：
function buttonToggle(where, pval, nval) {
var table = document.getElementById(where.attributes.rel.value);
where.value = (where.value == pval) ? nval : pval;
table.style.display = (table.style.display == 'block') ? 'none' : 'block';
}
回答by Felix Kling
Something like:
就像是：
function buttonToggle(where,pval,nval) {
var display = where.value === nval ? 'none' : 'block'; // or 'table'
document.getElementById('yourTableId').style.display = display;
where.value = (where.value == pval) ? nval : pval;
}
Or better:
或更好：
function buttonToggle(source, target, show_val, hide_val) {
var display = source.value === hide_val ? 'none' : 'block'; // or 'table'
target.style.display = display;
source.value = (source.value == show_val) ? hide_val : show_val;
}
and instead of adding your click handler inline, use JavaScript:
而不是添加您的点击处理程序内联，使用 JavaScript：
document.getElementById('nextbt').onclick = (function() {
var table = document.getElementById('yourTableId');
return function() {
toggleButton(this, table, 'View', 'Hide');
};
}());
回答by Mahesh
use jQuery. see demo http://jsfiddle.net/nBJXq/2/
使用 jQuery。见演示http://jsfiddle.net/nBJXq/2/
回答by David R Tribble
You will want to change the div's style.visibleto visibleor hidden, and/or set the style.displayto blockor none.
您需要将 div 更改style.visible为visibleor hidden，和/或将div设置style.display为blockor none。
