zoukankan      html  css  js  c++  java
  • 导航

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <style>
            ul {
                display: block;
                margin-left: 20px;
                padding: 0px;
                list-style: none;
                width:200px;
                background-color:cadetblue;
                overflow:hidden;
            }
            li {
                display: block;
                margin: 0;
                padding: 0;
                list-style: none;
                width:200px;
                background-color:aqua;
            }
        </style>
    </head>
    <body style="background: rgb(240, 249, 253);">
        <script type="text/javascript">
            $(document).ready(function () {
                $("li").click(function (e) {
                    var $target = $(this);
                    //console.log($target.html());
                    if ($target.next("ul").is(":hidden")) {
                        $("ul").not("#root").hide();
                        $target.next("ul").show();
                        $target.addClass("active");
                        $target.siblings().removeClass("active");
                    }
                    else {
                        $target.next("ul").hide();
                    }
                });
                
            });
    
        </script>
        <ul id="root">
            <li>1</li>
            <ul>
                <li>11</li>
                <li>12</li>
                <li>13</li>
            </ul>
            <li>2</li>
            <ul>
                <li>21</li>
                <li>22</li>
                <li>23</li>
            </ul>
            <li>3</li>
            <ul>
                <li>31</li>
                <li>32</li>
                <li>33</li>
            </ul>
        </ul>
    </body>
    </html>
  • 相关阅读:
    PCLint
    pthread_join
    作业过程查找
    sqlcmd (转)
    整合问题
    PATINDEX
    回归Dos操作的快感,进入PowerShell世界 (转)
    Javascript 面向对象编程(一):封装
    理解闭包
    Javascript 面向对象编程(三):非构造函数的继承
  • 原文地址:https://www.cnblogs.com/chen110xi/p/5002089.html
Copyright © 2011-2022 走看看