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. JAVA学习笔记 -- 多线程之共享资源

    在多线程程序执行过程中,可能会涉及到两个或者多个线程试图同一时候訪问同一个资源.为了防止这样的情况的发生,必须在线程使用共享资源时给资源"上锁",以阻挡其他线程的訪问. 而这样的机 ...

  2. HDU 2191悼念512汶川大地震遇难同胞——珍惜如今，感恩生活(多重背包)

    HDU 2191悼念512汶川大地震遇难同胞--珍惜如今.感恩生活(多重背包) http://acm.hdu.edu.cn/showproblem.php?pid=2191 题意: 如果你有资金n元, ...

  3. C#秘密武器之泛型

    一.简介: 很多初学者在刚开始接触泛型的时候会比较难理解泛型,在这里先把 “泛型”当作一个形容词,这样就方便理解了,因为很多东西都可以是泛型的!比如:“泛型的类”,“泛型的方法”,“泛型的接口”,“泛 ...

  4. iOS 带IAP提交注意事项及无法submit for review的解决方案

    原地址:http://blog.sina.com.cn/s/blog_71ce775e0101dl4a.html 最近项目接触到了苹果的程序内购(IAP),碰到不少问题,参考了很多帖子才得以解决.在此 ...

  5. 创建支持多种屏幕尺寸的apk

    文章转至:http://hell0android.iteye.com/blog/1899605 创建对两种以上屏幕尺寸的多apk支持(Creating Multiple APKs with 2+ Di ...

  6. 页面找不到js方法的原因，关于EasyUI

    有时EasyUI中datagride写法不正确,会导致无法加载页面上其他的js方法.datagride中的逗号是一个也不能多.一定要注意: 例如以下代码中标红的逗号就会导致后边的js不能正常加载. c ...

  7. Android设置拍照或者上传本地图片

    效果例如以下: 看代码: MainActivity类中: package com.example.ceshidemo; import java.io.ByteArrayOutputStream; im ...

  8. excel单元格内插入选择项pass、fail、not support等

    1.点击菜单栏的数据—-->>数据验证 2.选择 序列 在 来源 选项中填入Pass,Fail,On Going,Not Support 3.在选中的单元格并在菜单栏选中 新建规则

  9. PV、UV、GMV

    原文地址:电商术语:客单价.UV.PV.转化率.销售额作者:馨闻莲博 UV(独立访客):Unique Visitor,访问您网站的一台电脑客户端为一个访客.00:00-24:00内相同的客户端只会被计 ...

  10. 记一起和前端没什么卵关系的OPTION 405问题

    记一起和前端没什么卵关系的后端405问题 问题的关键点在于本来是POST请求,会变成OPTION请求,并且提示405报错,会类似跨域.并且只有某些手机机型才会(如Oppo系列). 其实跨域的问题,如果 ...