<jQuery> 七. 手风琴案例

最新推荐文章于 2023-11-22 10:48:18 发布

weixin_30662109

最新推荐文章于 2023-11-22 10:48:18 发布

阅读量123

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ZeroHour/p/8257711.html

版权

<!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>

转载于:https://www.cnblogs.com/ZeroHour/p/8257711.html

优惠劵

weixin_30662109

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
<jQuery> 七. 手风琴案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <...
复制链接

扫一扫