手风琴菜单的制作
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手风琴菜单的制作相关的知识，希望对你有一定的参考价值。
用到的知识点如下：
一、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>
以上是关于手风琴菜单的制作的主要内容，如果未能解决你的问题，请参考以下文章