折叠菜单，选择下拉（手风琴）

无聊，就自己写了一个手风琴的下拉菜单，写之前要介绍以下几个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>