超轻量级的基于jquery的三级展开列表

这几天在公司的通用管理后台，使用的左右框架结构，点击左侧，右侧展开内容，项目中经常遇到左侧二级或者三级的情况，以前都是使用dtree,但是发现dtree ，样式及结构上不好控制 ，
如果是动态的数据，还要写到cs文件里面 输入字符，这样不利于维护，时间久了自己都找不清了。、
于是今天自己写了个轻量级的三级展开菜单，如果需要可以在增加一级别，一般公司的项目三级都足够了。

简介：
div部分无需自己定义class 及ID,只要是如下的结构就可以了，数据可以是动态 也可以是静态的
样式自己可以控制，修改符合自己的风格

代码如下：
css


代码如下:

<style type="text/css">
*{ margin:0px; padding:0px;}
a{ text-decoration:none; color:#000;}
a:hover,a:linked{ color:#000;}
#nav{ margin-left:20px; list-style:none; }
#nav li，#nav li ul,#nav li ul li{ list-style:none;}
#nav li a{ width:200px; height:30px; line-height:30px; background:#ccc; display:block; text-indent:10px;}
#nav li ul li a{ background:#eaeaea;}
#nav li ul li ul li a{ background:#fffff2;}
</style>

js：


代码如下:

<script type="text/javascript">
//作者：loafinweb
// 网址：www.cnblogs.com/clc2008
$(function () {
$("#nav ul").hide();
//控制一级子菜单
$("#nav li a:first-child").click(function () {
$(this).siblings().toggle();
});
//控制二级子菜单
$("#nav li ul a:first-child").click(function () {
$(this).siblings().find("ul").toggle();
});
});
</script>

div：


代码如下:

<body>
<ul id="nav">
<li><a href="#">首页管理</a>
<ul>
<li><a href="#">+首页标题1</a>
<ul>
<li><a href="#">_首页标题1_1</a> </li>
<li><a href="#">_首页标题1_2</a> </li>
</ul>
</li>
<li><a href="#">首页标题2</a></li>
<li><a href="#">首页标题3</a></li>
</ul>
</li>
<li><a href="#">产品管理</a>
<ul>
<li><a href="#">产品标题1</a></li>
<li><a href="#">产品标题2</a></li>
<li><a href="#">产品标题3</a></li>
</ul>
</li>
</ul>
</body>

文件打包下载

赞 (0)

相关推荐

  • jQuery实现列表的全选功能

    只需要几行代码就可以实现列表的全选功能,并且可以配合post请求执行后台的删除程序 js 复制代码 代码如下: function DelAlert(data)     {         if(data == 'error')         {             alert("错误-");         }         else if(data == 'success')         {             alert("成功-");     

  • jQuery实现列表内容的动态载入特效

    采用Jquery实现的列表数据动态更新效果,更新的数据可以是ajax请求的数据. CSS: .main { width: 100%; margin-top: 100px; text-align: center; font-size: 12.5px; } th, td { border: 1px solid #ccc; line-height: 40px; padding-left: 5px; } .item:hover { background-color: #efefef; } .item:n

  • jQuery实现在列表的首行添加数据

    jQuery中可以通过append在列表的最后添加数据,也可以通过prepend在列表的最前面添加数据 方法很简单: 复制代码 代码如下: jQuery('#comment_list').prepend('<li>hello www.jb51.net</li>'); 另外附上jquery实现连续向textarea文本域添加数据的代码. <%@ page language="java" contenttype="text/html; charset

  • jquery移动点击的项目到列表最顶端的方法

    本文实例讲述了jquery移动点击的项目到列表最顶端的方法.分享给大家供大家参考.具体实现方法如下: <ul> <li>one</li> <li>two</li> <li>three</li> </ul> 如果点击two,则two这一行会移动到列表的最上方 $("li").click(function() { $(this).parent().prepend($(this)); }); 希望

  • jQuery实现仿腾讯视频列表分页效果的方法

    jQuery实现仿腾讯视频列表分页效果的方法

    本文实例讲述了jQuery实现仿腾讯视频列表分页效果的方法.分享给大家供大家参考.具体如下: 这里使用jQuery仿腾讯视频列表分页效果,无刷新分页特效,点击分页按钮,无刷新进入下一页内容列表. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • jquery实现点击展开列表同时隐藏其他列表

    jquery实现点击展开列表同时隐藏其他列表

    本文实例讲述了jquery实现点击展开列表同时隐藏其他列表.分享给大家供大家参考.具体如下: 这里使用jquery实现展开.隐藏特效,点击列表标题后该项内容展开,其它项收缩起来,也就是不显示了.个人喜好了,有的喜欢在默认状态下不显示其它选项的内容,这个就是这种情况,仅供参考吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • 加载列表时jquery获取ul中第一个li的属性

    当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修改属性:$("#top_menu li:first").attr("class","select"); 触发事件:$("#top_menu li:first").click(); 如果想获取li下的 a标签,如下: $("

  • jQuery实现自定义下拉列表

    html代码: 复制代码 代码如下: <div class="dropdownContainer">     <div class="dropdownDefault">1</div>     <span class="downArrow arrow"></span>     <ul class="dropdrown-menu">         <l

  • 超轻量级的基于jquery的三级展开列表

    超轻量级的基于jquery的三级展开列表

    这几天在公司的通用管理后台,使用的左右框架结构,点击左侧,右侧展开内容,项目中经常遇到左侧二级或者三级的情况,以前都是使用dtree,但是发现dtree ,样式及结构上不好控制 , 如果是动态的数据,还要写到cs文件里面 输入字符,这样不利于维护,时间久了自己都找不清了.. 于是今天自己写了个轻量级的三级展开菜单,如果需要可以在增加一级别,一般公司的项目三级都足够了. 简介: div部分无需自己定义class 及ID,只要是如下的结构就可以了,数据可以是动态 也可以是静态的 样式自己可以控制,修

  • 基于jQuery实现收缩展开功能

    基于jQuery实现收缩展开功能

    本文实例向大家分享了一款基于jQuery实现收起展开功能特效,供大家参考,具体内容如下 效果图: 点击倒三角可以进行展开操作 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-widt

  • 基于jquery实现三级下拉菜单

    本文实例为大家分享了jquery三级下拉菜单的具体实现代码,供大家参考,具体内容如下 在写这个的时候,首先要捋顺思路.点一个菜单的时候,其他的要闭合,点一级菜单的时候,二三级菜单要闭合,等等. 大致代码如下: <body> <aside> <ul class="one"> <li> <a href="#" class="a">目录A</a> <ul class=&quo

  • 基于jQuery的简单的列表导航菜单

    基于jQuery的简单的列表导航菜单

    下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 1.首先定义CSS样式表: 复制代码 代码如下: <style type="text/css"> body{font-size:13px} ul,li{list-style-type:none;padding:0px;margin:0px} .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFD

  • 基于jQuery实现点击列表加载更多效果

    本文实例为大家分享了jQuery点击加载更多效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery s

  • 基于jquery的滚动新闻列表

    基于jquery的滚动新闻列表

    呵呵,效果图如下:   ps:gif做的不是很好,大家将就一下吧,呵呵. 下面来看代码: 复制代码 代码如下: <div class="news-container" style="width: 260px; margin: auto;"> <ul> <li style="height:40px"> <!--这里可以换成是动态的新闻--> <a href="NewsRead.aspx

  • 基于jQuery代码实现圆形菜单展开收缩效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <script src="js/jquery.min.js"></script> <script src="js/jquery.menu.js"></script> <style> body { margin:0 auto; background:none repeat scroll 0 0 #FCFCFC } .outer_c

  • 基于jquery实现省市区三级联动效果

    基于jquery实现省市区三级联动效果

    本文实现更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们. JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 说明:数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"&g

  • 基于jQuery实现以手风琴方式展开和折叠导航菜单

    本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <sty

  • 基于jquery实现的树形菜单效果代码

    基于jquery实现的树形菜单效果代码

    本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

随机推荐