JQUERY实现的小巧简洁的无限级树形菜单，可用于后台或前台侧栏菜单！兼容性也比较好。

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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>ÎÞ±êÌâÎĵµ</title>

</head>

<script src="jquery.min.js"></script>

<style>

ul.a{width:100%;cursor:pointer;padding:0 0px;color:white;}

ul.a li{list-style-type:none;cursor:pointer;background:#fff;padding:5px 10px;color:black;width:90%;display:none}

.treelist{width:222px;}

ul.a div{height:34px;width:100%;background:url(jia.jpg) no-repeat;padding-left:27px;padding-top:6px;color:#333333;font-weight:bold;font-size:15px}

.shows{display:block}

</style>

<body>

<div class="treelist">

<ul class="a">

<div>ccccc</div>

    <li>xxxx</li>

    <li>

        <ul class="a">

        <div>ccccc</div>

            <li>xxxx</li>

            <li>xxxx</li>

            <li>

                <ul class="a">

                <div>ccccc</div>

                    <li>

                        <ul class="a">

                            <div>ccccc</div>

                            <li>xxxx</li>

                            <li>xxxx</li>

                            <li>xxxx</li>

                            <li>xxxx</li>

                        </ul>

                    </li>

                    <li>xxxx</li>

                    <li>xxxx</li>

                    <li>xxxx</li>

                </ul>

            </li>

            <li>xxxx</li>

        </ul>

    </li>

    <li>xxxx</li>

    <li>xxxx</li>

</ul>

<ul class="a">

<div>ccccc</div>

    <li>xxxx</li>

    <li>xxxx</li>

    <li>xxxx</li>

    <li>xxxx</li>

</ul>

<ul class="a">

<div>ccccc</div>

    <li>xxxx</li>

    <li>xxxx</li>

    <li>xxxx</li>

    <li>xxxx</li>

</ul>

</div>

<script>

/*

$(".a div").each(function(i){

    var w=$(this).parents("li").width();

    $(this).css("width",w-100+"px");

})

*/

$(".a").click(function(){

    $(this).find("li").click(function(event){

        return false

    })

    if($(this).hasClass("shows")){

        $(this).removeClass("shows");

        $(this).find("li").find("ul").removeClass("shows");

        $(this).find("li").hide();

        $(this).find("div").css("background","url(jia.jpg) no-repeat");

    }else{

        $(this).addClass("shows");

        $(this).find("li").show();

        $(this).find("li").find("ul").find("li").hide();

        $(this).show();

        $(this).find("div").eq(0).css("background","url(jian.jpg) no-repeat");

    }

})

</script>

</body>

</html>

JQUERY实现的小巧简洁的无限级树形菜单的更多相关文章

  1. jquery easy ui 1.3.4 Tree树形菜单（9）

    9.1.创建树形菜单 <ul id="tt" class="easyui-tree"> <li><span>第一级</ ...

  2. treeview树形菜单，递归

    我使用的是递归是实现无限级树形菜单: using System; using System.Collections; using System.Configuration; using System. ...

  3. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

  4. jQuery树形菜单(1)jquery.treeview

    jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...

  5. jquery树形菜单完整代码

    本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W ...

  6. js实现无限级树形导航列表

  7. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  8. 雷林鹏分享：jQuery EasyUI 树形菜单 - 使用标记创建树形菜单

    jQuery EasyUI 树形菜单 - 使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 元素中.无序列表的 元素提供一个基础的树(Tre ...

  9. 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单添加节点

    jQuery EasyUI 树形菜单 - 树形菜单添加节点 本教程向您展示如何附加节点到树形菜单(Tree).我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点. 创建食 ...

随机推荐

  1. Linux文件夹、分区

    必须明确,硬盘分区的存在,是由硬盘的物理特性决定的,不会因为操作系统的不同而有所改变 所以不用对为根目录/挂载分区的同时还为/usr挂载分区感到惊讶   ====分区的概念==== 可以把一个硬盘比成 ...

  2. webpacke install vue application 报错 Failed at the phantomjs-prebuilt@2.1.14 install script

    刚刚在网上下了个开源的项目: https://github.com/ing670/webappkiller 执行npm install 报错:npm ERR! Failed at the phanto ...

  3. ajax不运行success回调而是运行error回调

    调试代码遇到一个问题,就是前台运行删除操作后,controller返回数据,但前台接收时,ajax不运行success回调,总是弹出失败的对话框.接收数据类型是json. 先看看我的前台代码. if ...

  4. password技术应用设计实践-安全信息传输系统（SITS）（用Java实现DES、RSA、MD5算法）

    本系统包含五个模块,注冊模块.登录模块.RSA算法模块.DES算法模块.MD5算法模块. 这五个模块每个实现不同的功能. 注冊模块实现将username和password写入文件里,登录模块则负责将其 ...

  5. Oracle数据类型，函数与存储过程

    字符串类型    固定长度:char nchar    n 表示Unicode编码    可变长度: varchar2 nvarchar2 数字类型:number(P,S)P:整数位数,S小数位数   ...

  6. 怎样实现广度优先遍历（BFS）

    BFS过程: 一:訪问顶点V,并标记V为已经訪问 二:顶点V入队列 三:假设队列非空.进行运行,否则算法结束 四:出队列取得对头顶点u,假设顶点未被訪问,就訪问该顶点,并标记该顶点为已经訪问 五:查找 ...

  7. Linux经常使用命令(十五) - which

    我们常常在linux要查找某个文件,但不知道放在哪里了.能够使用以下的一些命令来搜索: which  查看可运行文件的位置. whereis 查看文件的位置. locate   配合数据库查看文件位置 ...

  8. python——list访问问题

    rect.append({'bbox':[(int(rect1), int(rect2)), (int(rect3), int(rect4))]}) 应这样访问 rect[0]['bbox'][0][ ...

  9. UVA 11534 - Say Goodbye to Tic-Tac-Toe(博弈sg函数)

    UVA 11534 - Say Goodbye to Tic-Tac-Toe 题目链接 题意:给定一个序列,轮流放XO,要求不能有连续的XX或OO.最后一个放的人赢.问谁赢 思路:sg函数.每一段.. ...

  10. VIM-不常用或不知道的技巧

    cc 清除一行 并在本行编辑, 同理 cw :32,65d 多行删除 g/pattern/d 删除包含特定字符的行 v/pattern/d 删除不包含指定字符的行 等同于 g!/pattern/d y ...