jquery 鼠标点击下滑案例

最新推荐文章于 2023-03-17 15:08:02 发布

转载最新推荐文章于 2023-03-17 15:08:02 发布 · 431 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lujieting/p/10099440.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现点击标题展开隐藏div的方法。通过给所有span元素注册点击事件，当点击时，显示当前span的兄弟div，同时隐藏其他div，实现内容的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
        $(function () {
           //给所有的span注册点击事件，让当前span的兄弟div显示出来
            $(".groupTitle").click(function () {
                //链式编程：在jQuery里面，方法可以一直调用下去。
                $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
            });
        });
    </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>