JavaScript一个简单的显示隐藏功能-CSDN博客

代码示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>显示隐藏</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10             list-style: none;
11         }
12         #box{
13             width: 200px;
14             margin: 0 auto;
15             /*下面两行被子级元素继承*/
16             font: 15px;
17             font-family: "simhei";
18         }
19         #span{
20             /*宽72px,高26px*/
21             display: inline-block;
22           width: 70px;
23            height: 24px;
24            border: 1px solid gray;           
25             text-align: center;
26             /*行高和高度一致则垂直居中*/
27             line-height: 24px;
28         }
29         #ul{
30             /*宽72px,高106px*/
31            width: 70px;
32            height: 104px;
33            border: 1px solid gray;
34            margin-top: 3px;
35            line-height: 25px;
36            text-align: center;
37            display: none;
38         }
39         #ul li:hover{
40           background: blue;
41         }
42     </style>
43 </head>
44 <body>
45     <div id="box">
46         <span id="span">设置</span>
47         <ul id="ul">
48             <li>搜索设置</li>
49             <li>高级设置</li>
50             <li>关闭预测</li>
51             <li>搜索历史</li>
52         </ul>
53     </div>
54 </body>
55 </html>
56 <!--
57    HTML是结构,css是样式,javascrip是行为
58    使用JavaScript完成一个简单的显示隐藏效果
59    下面代码的解析:从文档中获得span元素的内容,当鼠标经过或者离开span也就是设置这一元素区域时,触发函数,函数功能是修改display是否展示
60  -->
61 <script type="text/javascript">
62     document.getElementById('box').onmouseover=    function(){
63         document.getElementById('ul').style.display='block';
64     };
65     document.getElementById('box').onmouseout=function(){
66         document.getElementById('ul').style.display='none';
67     };
68 </script>