jquery多个鼠标移上显示下拉菜单

比眉伴天荒 2022-07-15 04:20 376阅读 0赞

jquery多个鼠标移上显示下拉菜单：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
  6.     <meta http-equiv="imagetoolbar" content="no" />
  7.     <title> demo </title>
  8.     <script type="text/javascript" src="jquery.min.js"></script>
  9.     <script type="text/javascript">
  10.         <!--
  11.             jQuery(document).ready(function ($){    
  12.                 //$(".subCategory").hide();    
  13.                 $(".down").each(function(i,obj){
  14.                     $(obj).hover (            
  15.                         function(){$(this).find(".subCategory").stop(true,true).slideDown();},
  16.                         function(){$(this).find(".subCategory").stop(true,true).fadeOut();}
  17.                     );
  18.                 });
  19.             });
  20.         //-->
  21.     </script>
  22.     <style type="text/css">
  23.         #nav{list-style:none;}
  24.         .menu{float:left; padding:5px; border:1px solid #ccc; background: #eaeaea; margin:0 5px;}
  25.         .subCategory{display:none;}
  26.     </style>
  27.  </head>
  28.  <body>
  30.     <div id="navBox">
  31.         <ul id="nav">
  32.             <li class="menu down">一级菜单 没有子分类</li>
  33.             <li class="menu down">一级菜单 有子分类
  34.                 <ul class="subCategory">
  35.                     <li class="subMenu">二级菜单项目</li>
  36.                     <li class="subMenu">二级菜单项目</li>
  37.                     <li class="subMenu">二级菜单项目</li>
  38.                 </ul>
  39.             </li>
  40.             <li class="menu">一级菜单 没有子分类</li>
  41.             <li class="menu down">一级菜单 有子分类
  42.                 <ul class="subCategory">
  43.                     <li class="subMenu">二级菜单项目</li>
  44.                     <li class="subMenu">二级菜单项目</li>
  45.                     <li class="subMenu">二级菜单项目</li>
  46.                 </ul>
  47.             </li>
  48.             <li class="menu">一级菜单 没有子分类</li>
  49.         </ul>
  50.     </div>
  52.  </body>
  53. </html>

发表评论

表情：
评论列表 （有 0 条评论，376人围观）

还没有评论，来说两句吧...

相关阅读