无聊，就自己写了一个手风琴的下拉菜单，写之前要介绍以下几个JQuery函数的用法：
1.children()方法 ，表示当前元素下的子元素，函数内可以有参数，参数为“子元素”的名称。
2.slideToggle()方法，在JQuery中，表示向上/向下滑动样式切换。参数可以取“slow”、“fast”、毫秒
3.slideUp()方法， 用于向上滑动元素。参数可以取“slow”、“fast”、毫秒。
4.siblings()方法，用于返回被选元素的所有同胞元素。如果加参数，表示被选元素的所有“参数”的同胞元素。
具体参见：http://www.runoob.com/jquery/jquery-traversing-siblings.html 下的JQuery 同胞详解。
好，我们知道了以上函数，我们开始编写代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>折叠选项框</title> <script type="application/javascript" src="js/jquery-1.9.1.js"></script> <script type="application/javascript"> $(function(){ $("#list li p").css("color","royalblue"); $(".main ul li ").click(function(){ $(this).children("ul .menu").slideToggle(); //siblings() 表示当前元素的所有同胞元素 $(this).siblings().children("ul .menu").slideUp(); }); }); </script> <style type="text/css"> .main{ width: 300px; height: 520px; border: 1px red solid; } .menulist{ list-style: none; } .menu{ color: darkmagenta; font: "微软雅黑"; display: none; } </style> </head> <body> <div class="main"> <ul id="list"> <li class="menulist"> <p>电视</p> <ul class="menu" style="display:block"> <li>长虹电视</li> <li>sky电视</li> <li>三星电视</li> </ul> </li> <li class="menulist"> <p>电脑</p> <ul class="menu"> <li>索尼电脑</li> <li>戴尔电脑</li> <li>华硕电脑</li> </ul> </li> <li class="menulist"> <p>ipdad</p> <ul class="menu"> <li>Apple IPad nimi</li> <li>Apple IPad Air Pro</li> <li>Apple IPad Air2</li> </ul> </li> <li class="menulist"> <p>手机</p> <ul class="menu"> <li>OPPO</li> <li>VIVO</li> <li>小米</li> <li>华为</li> </ul> </li> </ul> </div> </body> </html>
运行结果展示：
点击后的样式展示：
