javascript javascript切换显示/隐藏使用一个控件的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16605946/
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 show/hide div using one control
提问by devkiat
Is it possible to toggle show/hide div using only one control?
是否可以仅使用一个控件来切换显示/隐藏 div？
I have a div(div-menu) which is display:none by default and a logo('div-top-logo' inside a table)
我有一个 div(div-menu) 它是 display:none 默认情况下和一个 logo('div-top-logo' inside a table)
<script type="text/javascript">
//MENU HIDE/SHOW TOGGLE
function toggleMenuDiv() {
var showFlag;
if (showFlag == false) {
//SHOW DIV
var menu = document.getElementById('div-menu'); menu.style.display = 'block'; var contents = document.getElementById('div-contents'); contents.style.display = 'block';
showFlag = false;
}
else {
//HIDE DIV
var elem = document.getElementById('div-menu'); elem.style.display = 'none';
showFlag = true;
}
}
</script>
<table class="top-menu">
<tr>
<td id="div-top-logo" onclick="toggleMenuDiv();"></td>
<td id="div-top-sysname">EDI Service</td>
</tr>
</table>
<div id="div-menu" class="main-menu">
Menu1<br />
Menu2<br />
Menu3
</div>
Any kind of help would be appreciated.
任何形式的帮助将不胜感激。
采纳答案by dsgriffin
function toggleMenuDiv() {
var menu = document.getElementById('div-menu');
if (menu.style.display == 'none') {
menu.style.display = 'block';
}
else {
menu.style.display = 'none';
}
}
回答by Vignesh Paramasivam
Try this,
试试这个，
<script type="text/javascript">
//MENU HIDE/SHOW TOGGLE
function toggleMenuDiv() {
if (document.getElementById('div-menu').style.display = 'block') {
//SHOW DIV
document.getElementById('div-contents'); contents.style.display = 'none';
document.getElementById('div-menu').style.display = 'none'
}
else {
//HIDE DIV
document.getElementById('div-menu'); elem.style.display = 'block';
}
}
<table class="top-menu">
<tr>
<td id="div-top-logo" onclick="toggleMenuDiv();"></td>
<td id="div-top-sysname">EDI Service</td>
</tr>
<div id="div-menu" class="main-menu">
Menu1<br />
Menu2<br />
Menu3
回答by sharath s
<script>
$('#<%= check_box_click.ClientID %>').click(function ()
{
if ($(this).val() == "1")
{
$('#<%=divid.ClientID%>').prop("visibility", true);
$('#<%=divid.ClientID%>').show();
}
else
{
$('#<%=divid.ClientID %>').prop("visibility", false);
$('#<%=divid.ClientID %>').hide();
}
</script>
// try this
// 试试这个
回答by Uzair
var showFlag;
This will be initialized to "undefined" every time you call toggleMenuDiv(). As a result the else block would always be executed. You might want to make it a "global" variable.
每次调用toggleMenuDiv() 时，它都会被初始化为“undefined”。因此，else 块将始终被执行。您可能希望将其设为“全局”变量。
Remember too many global variables will be frowned upon.
记住太多的全局变量会让人不悦。
