zoukankan      html  css  js  c++  java
  • <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>
  • 相关阅读:
    expandafter
    又回到了kde
    朗读软件
    tex bookmarks
    vim命令执行时间
    vim,tex的编译
    utorrent
    火狐的扩展
    linux 无线指示灯闪
    tex溢出报警
  • 原文地址:https://www.cnblogs.com/ZeroHour/p/8257711.html
Copyright © 2011-2022 走看看