首页 > Web开发 > 详细

<jQuery> 七. 手风琴案例

时间:2018-01-10 13:09:07      阅读:237      评论:0      收藏:0      [点我收藏+]
<!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>

 

<jQuery> 七. 手风琴案例

原文:https://www.cnblogs.com/ZeroHour/p/8257711.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!