一级二级菜单切换 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         * {
  8             padding: 0;
  9             margin: 0;
 10         }
 11         ul {
 12             list-style: none;
 13         }
 14 
 15         .wrap {
 16             width: 330px;
 17             height: 30px;
 18             margin: 100px auto 0;
 19             background-image: url(imgs/bg.jpg);
 20             padding-left: 10px;
 21         }
 22 
 23         .wrap li {
 24             float: left;
 25             width: 100px;
 26             height: 30px;
 27             margin-right: 10px;
 28             position: relative;
 29         }
 30 
 31         .wrap a {
 32             color: black;
 33             text-decoration: none;
 34             display: block;
 35             width: 100px;
 36             height: 30px;
 37             text-align: center;
 38             line-height: 30px;
 39             background-image: url(imgs/libg.jpg);
 40         }
 41 
 42         .wrap li ul {
 43             position: absolute;
 44             display: none;
 45         }
 46     </style>
 47     <script src="jquery-1.11.1.min.js"></script>
 48     <script>
 49         $(document).ready(function () {
 50             // mouseenter事件 是 鼠标经过时触发的事件
 51             // 第一种
 52             /*$(".wrap li").mouseenter(function () {
 53                 $(this).children("ul").show();
 54             });
 55 
 56             $(".wrap li").mouseleave(function () {
 57                 $(this).children("ul").hide();
 58             });*/
 59             // 第二种
 60             /*$(".wrap li").hover(function () {
 61                 //alert("1");
 62                 $(this).children("ul").show();
 63             }, function () {
 64                 $(this).children("ul").hide();
 65             });*/
 66             // 第三种
 67             /*$(".wrap li").hover(function () {
 68                 /!*alert("1");*!/
 69                 var $this = $(this).children("ul");
 70                 var isShow = $this.css("display");
 71                 if(isShow === "block") {
 72                     $this.hide();
 73                 } else {
 74                     $this.show();
 75                 }
 76             });*/
 77             // 第四种
 78             $(".wrap li").hover(function () {
 79                 $(this).children("ul").slideToggle();
 80             });
 81         });
 82     </script>
 83 </head>
 84 <body>
 85 <div class="wrap">
 86     <ul>
 87         <li>
 88             <a href="#">一级菜单1</a>
 89             <ul>
 90                 <li><a href="#">二级菜单1</a></li>
 91                 <li><a href="#">二级菜单2</a></li>
 92                 <li><a href="#">二级菜单3</a></li>
 93             </ul>
 94         </li>
 95         <li>
 96             <a href="#">一级菜单1</a>
 97             <ul>
 98                 <li><a href="#">二级菜单1</a></li>
 99                 <li><a href="#">二级菜单2</a></li>
100                 <li><a href="#">二级菜单3</a></li>
101             </ul>
102         </li><li>
103         <a href="#">一级菜单1</a>
104         <ul>
105             <li><a href="#">二级菜单1</a></li>
106             <li><a href="#">二级菜单2</a></li>
107             <li><a href="#">二级菜单3</a></li>
108         </ul>
109     </li>
110     </ul>
111 </div>
112 </body>
113 </html>

 

posted @ 2018-01-01 11:15  前端极客  阅读(679)  评论(0)  编辑  收藏  举报