关于二级菜单显示后不隐藏的问题

最新推荐文章于 2022-10-16 21:33:52 发布

weixin_30419799

最新推荐文章于 2022-10-16 21:33:52 发布

阅读量380

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haley168/articles/menu.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
 6     </script>
 7     <title>二级菜单--用于语言的选择</title>
 8     <style>
 9         ul,li{
10             margin:0;
11             padding:0;
12             list-style: none;
13         }
14         .lang{
15             width:120px;
16         }
17         .lang>p{
18             padding:10px 20px;
19             background-color: #ddd;
20             width:80px;
21             cursor: pointer;
22             text-align: center;
23             margin:0;
24         }
25         .lang>ul{
26             background-color: #eee;
27             width:120px;
28         }
29         .lang ul>li{
30             width:80px;
31             height:30px;
32             padding:0 20px;
33             line-height: 30px;
34             border-bottom:2px solid #ddd;
35             cursor: pointer;
36             text-align: center;
37         }
38         .lang>ul>li:hover{
39             background-color: #ddd;
40         }
41     </style>
42 </head>
43 <body>
44 <div class="lang">
45     <p>选择语种</p>
46     <ul style="display:none;">
47         <li>中文简体</li>
48         <li>中文繁体</li>
49         <li>英语</li>
50         <li>日语</li>
51         <li>韩语</li>
52     </ul>
53 </div>
54 <script>
55     var lang=$('.lang');
56     lang.mouseover(function(){
57         $(this).children('ul').show();
58     });
59     lang.mouseout(function(){
60         $(this).children('ul').hide();
61     });
62     lang.find('li').click(function(){
63         console.log($(this).html());
64         $(this).parent('ul').prev('p').html($(this).html());
65     });
66 </script>
67 </body>
68 </html>