javascript 使用一个控件切换显示/隐藏 div答案

【问题标题】：javascript toggle show/hide div using one controljavascript 使用一个控件切换显示/隐藏 div
【发布时间】：2013-05-17 09:40:49
【问题描述】：

是否可以仅使用一个控件来切换显示/隐藏 div？

我有一个 div(div-menu)，默认情况下是 display:none 和一个 logo('div-top-logo' 在表格内)

<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>

我们将不胜感激。

【问题讨论】：

你的意思是这样？ - jsfiddle.net/wdqLv
抱歉回复晚了.. 是的，这绝对是我需要的。谢谢天顶

标签： javascript asp.net show-hide

【解决方案1】：

function toggleMenuDiv() {
var menu = document.getElementById('div-menu');
   if (menu.style.display == 'none') {
     menu.style.display = 'block';              
   }
   else {
     menu.style.display = 'none';
   }
}

【讨论】：

【解决方案2】：

var showFlag;

每次调用 toggleMenuDiv() 时，这将被初始化为“未定义”。结果，else 块将始终被执行。您可能希望将其设为“全局”变量。

记住太多的全局变量会令人不悦。

【讨论】：

【解决方案3】：

试试这个，

<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

【讨论】：

【解决方案4】：

<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>

//试试这个

【讨论】：

添加一些解释，说明此答案如何帮助 OP 解决当前问题