首页 > 代码库 > 手风琴菜单的制作

手风琴菜单的制作

2024-10-30 05:29:02   207人阅读

用到的知识点如下：

一、jQuery

1、slideDown（）向下展示

技术分享

2、slideUp（）向上卷起

技术分享

3、slideToggle（）依次展开或卷起某个元素

技术分享

 二、jQuery链式调用

jquery对象的方法在执行完之后返回这个jquery对象，所有的jQuery对象的方法可以连起来写：

$("#div1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")

 $("#div1").//id位div1的元素

.chlidren("ul")  //该元素下的ul子元素

.slideDown("fast")   //高度从零到实际高度来显示ul元素

.parent()   //跳转到ul的父元素，也就是id为div1的元素

.siblings()  //跳转div1元素同级的所有兄弟元素

.chlidren("ul")   //查找这些兄弟元素中的ul子元素

.slideUp("fase")   //从实际高度变换为零来隐藏ul元素

三、效果图和代码如下：

技术分享

技术分享 
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>用jQuery中的slideToggle制作菜单</title>
  6     <link rel="stylesheet" href="../css/reset.css">
  7     <style>
  8         .menu{
  9             width:200px;
 10             margin:10px auto;
 11         }
 12         .menu>li{
 13             background: #8731dd;
 14             color:#fff;
 15             text-indent: 16px;
 16             margin-top:-1px;
 17             cursor: pointer;
 18         }
 19         .menu>li>span{
 20             padding:10px 0;
 21             display:block;
 22             border-bottom: 1px solid #f3f3f3;
 23         }
 24         .menuactive,.menu>li>span:hover{
 25             background:#c7254e;
 26         }
 27         .menu > li ul{
 28             display: none;
 29         }
 30         .menu > li ul li{
 31             text-indent:20px;
 32             background: #9a9add;
 33             border:1px solid #f3f3f3;
 34             margin-top:-1px;
 35             padding:6px 0;
 36         }
 37         .menu >li .active{
 38             display: block;
 39         }
 40         .menu > li ul li:hover{
 41             background:#67C962;
 42         }
 43         .menu_li ul{
 44             margin-bottom:1px;
 45         }
 46     </style>
 47     <script src="../js/jquery-1.12.4.min.js"></script>
 48     <script>
 49         $(function () {
 50             $(".menu_li>span").click(function(){
 51                 $(this).addClass("menuactive").parent().siblings().children("span").removeClass("menuactive");
 52                 $(this).next("ul").slideToggle();
 53                 $(this).parent().siblings().children("ul").slideUp();
 54             })
 55         })
 56     </script>
 57 </head>
 58 <body>
 59 <ul class="menu" id="menu">
 60     <li class="menu_li">
 61         <span>水果系列</span>
 62         <ul class="active">
 63             <li>苹果</li>
 64             <li>梨子</li>
 65             <li>葡萄</li>
 66             <li>火龙果</li>
 67         </ul>
 68     </li>
 69     <li class="menu_li">
 70         <span>海鲜系列</span>
 71         <ul>
 72             <li>鱼</li>
 73             <li>大虾</li>
 74             <li>螃蟹</li>
 75             <li>海带</li>
 76         </ul>
 77     </li>
 78     <li class="menu_li">
 79         <span>果蔬系列</span>
 80         <ul>
 81             <li>茄子</li>
 82             <li>黄瓜</li>
 83             <li>豆角</li>
 84             <li>西红柿</li>
 85         </ul>
 86     </li>
 87     <li class="menu_li">
 88         <span>速冻食品</span>
 89         <ul>
 90             <li>水饺</li>
 91             <li>冰淇淋</li>
 92         </ul>
 93     </li>
 94     <li class="menu_li">
 95         <span>肉质系列</span>
 96         <ul>
 97             <li>猪肉</li>
 98             <li>羊肉</li>
 99             <li>牛肉</li>
100         </ul>
101     </li>
102 </ul>
103 </body>
104 </html>
View Code

 

手风琴菜单的制作


联系
我们