js

 js中如何单击按钮 层显示 再次单击 页面的其他位置 层隐藏

解决方案 »

  1.   

    定义一个div，初始display:none;
    在按钮的onclick时间加入js函数，
    函数中判断：if(document.getElementById(divName).style.display == "none" )
    document.getElementById(divName).style.display="inline";
    else
    document.getElementById(divName).style.display="none";
      

  2.   

    <script type="text/javascript">
    onload = function(){
      document.onclick = function(event){
          event = event || window.event;
           var src = event.target || event.srcElement;
           if(event.target == document.getElementById("bt")){
    document.getElementById("d1").style.display = "block";
             }else if(event.target != document.getElementById("d1")){
    document.getElementById("d1").style.display = "none";
            }
       }
    }
      </script>
    <div id="d1" style="background:red;height:50px;width:50px;display:none;">测试滚轮事件</div>
    <input type="button" />
      

  3.   


       function whichButton(event) {
                if (window.event && event.button == 1) {
                    document.getElementById('aaa').style.display = 'none';
                    return false;
                }
                else (event && event.button == 0)
                {
                    document.getElementById('aaa').style.display = 'none';
                    return false;
                }
            }
    <body onmousedown="whichButton(event)"> 
        <form id="form1" runat="server">
        <div>
        <div id="aaa" style="display:none">aaa</div>
        <input id="Button2" type="button" value="ttt" onclick="document.getElementById('aaa').style.display='block';" />
      

  4.   

    2 楼正解
    <script type="text/javascript">
    onload = function(){
      document.onclick = function(e){
      e= e|| window.event;
      var obj= e.target || e.srcElement;
      if(obj== document.getElementById("bt")){
    document.getElementById("d1").style.display = "block";
      }else if(obj != document.getElementById("d1")){
    document.getElementById("d1").style.display = "none";
      }
      }
    }
      </script>
    <div id="d1" style="background:red;height:50px;width:50px;display:none;">测试滚轮事件</div>
    <input type="button" id="bt"/>