Question

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

我有一个div（div-menu），它显示为：默认情况下为none，并且有一个徽标（表格中的'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>

任何形式的帮助都将受到赞赏。

Answer 1

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

Answer 2

var showFlag;

每次调用toggleMenuDiv（）时，都会将其初始化为“undefined”。结果，总是会执行else块。您可能希望将其设为“全局”变量。

请记住，太多的全局变量将不受欢迎。

Answer 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

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

//试试这个

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

4 个答案: