JQUERY实现的小巧简洁的无限级树形菜单
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实现的小巧简洁的无限级树形菜单的更多相关文章
- jquery easy ui 1.3.4 Tree树形菜单(9)
9.1.创建树形菜单 <ul id="tt" class="easyui-tree"> <li><span>第一级</ ...
- treeview树形菜单,递归
我使用的是递归是实现无限级树形菜单: using System; using System.Collections; using System.Configuration; using System. ...
- jQuery 树形菜单
树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...
- jQuery树形菜单(1)jquery.treeview
jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...
- jquery树形菜单完整代码
本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W ...
- js实现无限级树形导航列表
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 使用标记创建树形菜单
jQuery EasyUI 树形菜单 - 使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 元素中.无序列表的 元素提供一个基础的树(Tre ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单添加节点
jQuery EasyUI 树形菜单 - 树形菜单添加节点 本教程向您展示如何附加节点到树形菜单(Tree).我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点. 创建食 ...
随机推荐
- docker实战——Docker本地私有镜像仓库Harbor搭建及配置
Harbor介绍 Docker容器应用的开发和运行离不开可靠的镜像管理,虽然docker官方提供了公共的镜像仓库(Docker Hub),但是从安全和效率等方面考虑,部署我们私有环境内的Registr ...
- IOS Appstore价格表
- easyui required 提交验证
使用easyui时,对于提交验证,不不过在标签属性中加入data-options=required:true这句话这么来的.还须要另外加上才写东西能够把验证完整实现 1.设置from的属性 <f ...
- 如何查看mysql数据库的引擎/MySQL数据库引擎详解
一般情况下,mysql会默认提供多种存储引擎,你可以通过下面的查看: 看你的mysql现在已提供什么存储引擎:mysql> show engines; 看你的mysql当前默认的存储引擎:mys ...
- Python实时语音识别控制
代码地址如下:http://www.demodashi.com/demo/12946.html Python实时语音识别控制 概述 本文中的语音识别功能采用 百度语音识别库 ,首先利用 PyAudio ...
- iOS学习笔记-自己动手写RESideMenu
代码地址如下:http://www.demodashi.com/demo/11683.html 很多app都实现了类似RESideMenu的效果,RESideMenu是Github上面一个stars数 ...
- android-seekbar的thumb图片不居中显示的处理办法
seekbar更换图片后,发现thumb的图片不会居中(竖直方向)显示了,代码如下: <SeekBar android:id="@+id/wb_seekbar" androi ...
- Android.KungFu手机病毒原理及清理方法
原文链接:http://jingyan.baidu.com/article/363872ec8ad56b6e4ba16fb1.html Android.KungFu手机病毒清理方法 浏览:3333 | ...
- Linux禁止非WHEEL用户使用SU命令
通常情况下,一般用户通过运行"su -"命令.输入正确的rootpassword.能够登录为root用户来对系统进行管理员级别的配置. 可是.为了更进一步加强系统的安全性,有必要建 ...
- 固态继电器SSR
s107. LH1521. CPC1035N http://e22a.com/h.bXsDYw?cv=AAOzhSfJ&sm=53e30b