jQuery 无限级菜单的简单实例


Posted in Javascript onFebruary 21, 2014

我将CSS完全分离出来用jQuery附加式样,就是为了多级染色,并且生成目录树和控制式样也很容易,生成时也不需要考虑式样。数据表建议用事先Order排序的方式,不要读取数据的时候才分级排序,这样性能会较佳。

我把它做成了个.Net的控件,作为轻量级的无限目录树,还是相当好用的。只是还不完善,我先慢慢修改,等差不多了再发布出来。

<!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 id="Head1" runat="server">
    <title>jQuery 无限级菜单</title>
    <style type="text/css">
    #menu a {
        color:#fff;
    }
    #menu div {
        /* text-align:center; */
    }
    #menu div a {
        padding-left:20px;
    }
    #menu div.root {
        display:block;
    }
    .list { background:url(list.gif) no-repeat 6px 6px; }
    </style>
    <script type="text/javascript" language="javascript" src="jquery-1.2.3.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(function(){
        //颜色列表,如果想支持无限级,最好自动生成颜色列表,不过我的配色一项很差,用生成的就更惨不忍睹了……
        _cor = ['#003366', '#0066CC', '#3399FF', '#990000', '#CC0000', '#FF3300', '#FF9900', '#FFCC66', '#FFFFFF'];
        //初始化类
        (function Init(i,obj){
            i++;
            //查找子节点
            _obj = obj.children('div');
            //若有子节点,则增加一个专有式样
            if (_obj.length > 0)
                obj.addClass('list');
            $.each(_obj, function(j,o){
                //若是子目录则隐藏
                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>
                    <div> <a href="#" onclick="return GotoURL(this)">第四级</a> </div>
                </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>
                        <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>
                        </div>
                    </div>
                </div>
            </div>
            <div> <a href="#" onclick="return GotoURL(this)">第二级</a> </div>
        </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>
            <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>
                    <div> <a href="#" onclick="return GotoURL(this)">第四级</a> </div>
                </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>
                        <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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Javascript 相关文章推荐
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
js控制table合并具体实现
Feb 20 #Javascript
js文件Cookie存取值示例代码
Feb 20 #Javascript
js中array的sort()方法使用介绍
Feb 20 #Javascript
javascript生成随机大小写字母的方法
Feb 20 #Javascript
将json对象转换为字符串的方法
Feb 20 #Javascript
javascript实现json页面分页实例代码
Feb 20 #Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 #Javascript
You might like
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
node.js使用redis储存session的方法
2018/09/26 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python 性能优化技巧总结
2016/11/01 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
pygame实现弹球游戏
2020/04/14 Python
python自定义函数def的应用详解
2020/06/03 Python
selenium如何定位span元素的实现
2021/01/13 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
会计学自我鉴定
2014/02/06 职场文书
家庭困难证明
2014/10/12 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
Python基础之元类详解
2021/04/29 Python
如何在Python项目中引入日志
2021/05/31 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS