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

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

运行结果展示：

点击后的样式展示：

posted on 2017-04-06 10:18 C碧水蓝天S 阅读(1385) 评论(0) 编辑收藏举报