如何点击按钮显示一个DIV，点击页面其它地方隐藏这个DIV？

如何点击按钮显示一个DIV，点击页面其它地方隐藏这个DIV

解决方案 »

  1.   

    如果只是ie浏览器
    在div  onblur的时候添  隐藏div就好了如果还要估计其他浏览器
    那就给document添加onmousedown事件吧隐藏后记得把document的onmousedown事件清楚掉 在按按纽的时候在添加  document事件
      

  2.   

    给这个<div>定义一个ID="a"
    $("div [id=a]").hide();显示用show()
      

  3.   

    <DIV ID="divID"> Hello word </div>隐藏用hide()
    $("#divID").hide();显示用show()
    $("#divID").show();
      

  4.   

    <html>
    <head>
    <style>
    body{
    padding:0px;
    margin: 0 auto;
    }
    </style>
    <script>
    function show(e){
    e = e || event;
    if(e.stopPropogation){
    alert(1);
    e.stopPropogation();
    }else{
    e.cancelBubble = true;
    }
    document.getElementById("content1").style.display = "";
    }
    function init(){
    document.body.onmousedown = function(){
    document.getElementById("content1").style.display = "none";
    };
    }
    </script>
    </head>
    <body onload="init()">
    <input type="button" value="显示" onclick="show(event)"/>
    <div id="content1" style="display:none">
    关注排行
    1. 关注排行1
    2. 关注排行2
    3. 关注排行3
    4. 关注排行4
    </div>
    </body>
    </html>
      

  5.   

    给这个 <div>定义一个ID="a" 
    $("div [id=a]").hide();显示用show()  
      

  6.   

    <html>
    <head>
      <title>test</title>
      <script type="text/javascript">
       function show(oEvent){
         document.getElementById("a").style.display = "block";
         e = window.event || oEvent;
         if (e.stopPropagation)
         {
             e.stopPropagation();
         }else{
             e.cancelBubble = true;
         }
       }
       function hide(){
         document.getElementById("a").style.display = "none";
       }
      </script>
    </head>
    <body onclick="hide();">
    <input type="button" onclick = "show();" />
    <div id="a">
    test
    </div>
    </body>
    </html>
      

  7.   

    上面搞错了，在FF下不能用：
    <html>
    <head>
      <title>test</title>
      <script type="text/javascript">
       function show(oEvent){
         document.getElementById("a").style.display = "block";
         e = window.event || oEvent;
         if (e.stopPropagation)
         {
             e.stopPropagation();
         }else{
             e.cancelBubble = true;
         }
       }
       function hide(){
         document.getElementById("a").style.display = "none";
       }
       window.onload = function(){
          document.body.onclick = hide;
          document.getElementById("c").onclick = show;
       };
      </script>
    </head>
    <body>
    <input id="c" type="button" value="ClickMe" />
    <div id="a">
    test
    </div>
    </body>
    </html>
      

  8.   

    event.target来判断在那个srcElement下面