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 相关文章推荐
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
理解JS事件循环
Jan 07 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
js转换对象为xml
Feb 17 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
webpack自动打包和热更新的实现方法
Jun 24 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 一个随机字符串生成代码
2010/05/26 PHP
php 文件上传类代码
2011/08/06 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python实现多线程的两种方式分析
2018/08/29 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python解析含有重复key的json方法
2019/01/22 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
Python字典dict常用方法函数实例
2020/11/09 Python
python中str内置函数用法总结
2020/12/27 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
培训自我鉴定
2014/01/31 职场文书
中学教师培训制度
2014/01/31 职场文书