jQuery 无限级菜单的简单实例

2020-05-23 06:17:01易采站长站整理

                //若是子目录则隐藏
                if (i > 0)
                    $(o).hide();
                //根据目录级数查找颜色字典上背景色,可改为图片什么的。
                $(o).css(‘background-color’,_cor[i]);
                //查找子目录
                Init(i,$(o));
            });
        })(-1,$(‘#menu’));
    });
    //跳转链接
    function GotoURL(obj) {
        //若链接最末一位不是符号“#”则跳转链接,因为取href得到链接绝对路径,所以只能取最后一位,其实可以传值判断或生成目录树时不产生onclick都是可以的
        if (obj.href.substring(obj.href.length – 1, obj.href.length) != “#”) return true;
        //拉出和缩进的特效
        $.each($(obj).parent().children(‘div’), function(i,o){
            $(o).slideToggle(‘slow’);
        });
        return false;
    }
    </script>
</head>
<body>


    <div id=”menu”>
        <div> <a href=”#” onclick=”return GotoURL(this)”>第一级</a> </div>
        <div> <a href=”#” onclick=”return GotoURL(this)”>第一级</a>
            <div> <a href=”#” onclick=”return GotoURL(this)”>第二级</a> </div>
            <div> <a href=”#” onclick=”return GotoURL(this)”>第二级</a>
                <div> <a href=”#” onclick=”return GotoURL(this)”>第三级</a>
                    <div> <a href=”#” onclick=”return GotoURL(this)”>第四级</a> </div>