<jQuery> 七. 手风琴案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(function () {
            // 隐藏所有的div
            $(".parentWrap>li>div").hide();
            // 注册事件span
            $(".groupTitle").click(function () {
                // 链式编程, 在jQuery里, 方面可以一直调用下去
                $(this).next().show().parent().siblings().children("div").hide(100);
            });
        });

    </script>
</head>
<body>
<ul class="parentWrap">
    <li class="menuGroup">
        <span class="groupTitle">标题1</span>
        <div>我是弹出来的div1</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题2</span>
        <div>我是弹出来的div2</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题3</span>
        <div>我是弹出来的div3</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题4</span>
        <div>我是弹出来的div4</div>
    </li>
</ul>
</body>
</html>

 

posted @ 2018-01-10 11:36  云淡风轻我爱编程  阅读(220)  评论(0)    收藏  举报