jquery手风琴案例

手风琴案例

html:

<ul class="parentWrap">
            <li class="menuGroup">
                <span class="groupTitle">权限管理</span>
                <div>
                    <ul>
                        <li><a href="">角色</a></li>
                        <li><a href="">账户</a></li>
                    </ul>
                </div>
            </li>
            <li class="menuGroup">
                <span class="groupTitle">设备管理</span>
                <div>
                    <ul>
                        <li><a href="">幻境</a></li>
                        <li><a href="">机器人</a></li>
                        <li><a href="">账户</a></li>
                    </ul>
                </div>
            </li>
            <li class="menuGroup">
                <span class="groupTitle">APP管理</span>
                <div>
                    <ul>
                        <li><a href="">阿U机器人</a></li>
                        <li><a href="">海底世界</a></li>
                        <li><a href="">阿U宝贝听</a></li>
                    </ul>
                </div>
            </li>
            <li class="menuGroup">
                <span class="groupTitle">用户管理</span>
                <div>
                    <ul>
                        <li><a href="">添加用户</a></li>
                        <li><a href="">用户管理</a></li>
                    </ul>
                </div>
            </li>
        </ul>

css:

            *{
                margin: 0;
                padding: 0;
            }
            .parentWrap{
                width: 200px;
                text-align: center;
            }
            ul{
                list-style-type: none;
            }
            .menuGroup{
                border: 1px solid #999;
                background-color: #ccc;
            }
            .groupTitle{
                display: block;
                height: 20px;
                line-height: 20px;
                font-size: 16px;
                border-bottom: 1px solid #ccc;
                cursor: pointer;
            }
            .menuGroup>div{
                height: 200px;
                background-color: #fff;
                display: none;
            }

js:

        <script src="js/jquery-3.5.1.min.js"></script>
        <script>
            $(function(){
                /* 
                 1.给所有的span注册单击事件，让当前span的兄弟div显示出来
                 */
                 $('.groupTitle').click(function(){
                     $(this).next().slideDown(200);
                     $(this).next().parent().siblings().children('div').slideUp(200);
                 })
            });
        </script>

思路分析：

$(this) 它自己

next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

slideDown([speed],[easing],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

$(this).next() 紧挨着它的下一个元素

$(this).next().slideDown(200) 让 “紧挨着它的下一个元素” 向下滑动（0.2s） 显示出来

$(this).next().slideDown(200).parent() 找到 “紧挨着它的下一个元素”的父级元素 ---就是我们这个案例中的li

$(this).next().slideDown(200).parent().siblings() 找到 “紧挨着它的下一个元素”的父级元素li 的 兄弟（很多li）

$(this).next().slideDown(200).parent().siblings().children("div") 再去 父级元素li 的 兄弟（很多li）里面 找 他们各自里面 div

$(this).next().slideDown(200).parent().siblings().children("div").slideUp(200) 兄弟（很多li）里面 找 他们各自里面 div，让这些div 向上滑动！