关于二级菜单显示后不隐藏的问题
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>
haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!