显示隐藏div——点击按钮显示div，点击其他地方都隐藏div 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:200px; border: 1px solid red; display: none;}
</style>
<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    var oDiv = document.getElementById('div1');    
    oBtn.onclick = function(ev) {
        var ev = ev || event; //事件对象的浏览器兼容        
        ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡        
        oDiv.style.display = 'block';
    }    
    document.onclick = function() {        
        oDiv.style.display = 'none';  //点击除了oBtn以外的元素都隐藏
    }    
}
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
    <div id="div1"></div>  
    <p>ppppp</p>
    <p>ppppp</p>
    <p>ppppp</p>
    <p>ppppp</p>
</body>
</html>

 

posted @ 2017-04-14 13:31  念念念不忘  阅读(704)  评论(0)    收藏  举报