<!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>
posted on 2015-11-28 01:25 chen110xi 阅读(146) 评论(0) 收藏举报
导航
