导航-优快云博客

本文介绍了一个使用JavaScript实现的递归函数，用于展示嵌套列表结构，并通过点击操作激活特定的子菜单项。通过事件监听器，用户可以轻松地在不同层级的菜单项之间进行导航。

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