仿select下拉框 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1{width: 300px; height: 300px;background-color:red;display: none;}
 8         </style>
 9         <script src="move2.js"></script>
10         <script>
11             window.onload=function(){
12                 var oDiv=document.getElementById('div1');
13                 var oBtn=document.getElementById('btn1');
14 
15                 oBtn.onclick=function(ev){
16                     var oEvent=ev||event;
17                     oDiv.style.display='block';
18 
19                     oEvent.cancelBubble=true;   //取消冒泡
20                 }
21 
22                 document.onclick=function(){
23                     oDiv.style.display='none';
24                 }
25             }
26         </script>
27     </head>
28     <body>
29         <input id="btn1" type="button" value="显示">
30         <div id="div1">
31         </div>
32     </body>
33 </html>
View Code

 

posted @ 2020-04-28 13:00  孝文  阅读(115)  评论(0)    收藏  举报