jquery实现树形二级菜单实例代码


Posted in Javascript onNovember 20, 2013

直接上代码:

<!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=utf-8" /> 
<title>jQuery实现的树形列表菜单(Menu Tree) </title> 
<meta name="Copyright" content=" https://3water.com/" /> 
<meta name="description" content="jQuery实现的树形列表菜单(Menu Tree),JavaScript分享网" /> 
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" /> <style type="text/css"> 
.padding {height:300px;} 
 This copyright notice must be kept untouched in the stylesheet at  
all times. 
The original version of this stylesheet and the associated (x)html 
is available at https://3water.com
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved. 
This stylesheet and the associated (x)html may be modified in any  
way to fit your requirements. 
 
#wrap {position:relative; height:200px; width:130px; z-index:100;} 
#nav {position:absolute; left:0; top:0;} 
#nav,  
#nav ul {padding:0; margin:0; list-style:none; font-family:arial, sans-serif; background:#fff; font-weight:bold;} 
#nav li a {padding-left:20px; white-space:nowrap;} 
#nav li ul li a {padding-left:0;} 
#nav ul {padding-left:20px;} 
#nav li a {color:#66b; text-decoration:none; font-size:11px;} 
#nav li {font-size:13px; line-height:25px; color:#d80; cursor:pointer; width:100%;} 
#nav li.down {text-indent:20px;} 
#nav li a:hover {text-decoration:underline;} 
</style> 
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
 This copyright notice must be untouched at all times. 
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved. 
$(document).ready(function() { 
$("ul#nav ul").hide(); 
$('ul#nav li:has(ul)').each(function(i) { 
$(this).children().slideUp(400); 
}); 

$('li.p1:has(ul)').click(function(event){ 
        if (this == event.target) { 
        current = this; 
        $('ul#nav li:has(ul)').each(function(i) { 
        if (this != current) {$(this).children().slideUp(400);} 
        }); 
        $(this).children("ul:eq(0)").slideToggle(400); 
        } 
    }); 
}); 
 
</script> 
</head> 
<body> 
 
<div id="wrap"> 
<ul id="nav"> 
<li><a href="#url">Home</a></li> 
<li class="p1 down">Products 
    <ul> 
        <li><a href="#url">Flashguns</a></li> 
        <li><a href="#url">Tripods</a></li> 
        <li><a href="#url">Filters</a></li> 
    </ul> 
</li> 
<li class="p1 down">Services 
    <ul> 
        <li><a href="#url">Printing</a></li> 
        <li><a href="#url">Photo Framing</a></li> 
        <li><a href="#url">Retouching</a></li> 
        <li><a href="#url">Archiving</a></li> 
    </ul> 
</li> 
</ul> 
</div> 
</body> 
</html>

其中的jquery的地址自己得换一个能够找到的,要不没有效果
Javascript 相关文章推荐
jQuery的链式调用浅析
Dec 03 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Jquery注册事件实现方法
May 18 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
react-native android状态栏的实现
Jun 15 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 #Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 #Javascript
js中的布尔运算符使用介绍
Nov 20 #Javascript
浅析hasOwnProperty方法的应用
Nov 20 #Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 #Javascript
JS画线(实例代码)
Nov 20 #Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 #Javascript
You might like
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php适配器模式介绍
2012/08/14 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
vue-router单页面路由
2017/06/17 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
js实现点击生成随机div
2020/01/16 Javascript
使用python加密自己的密码
2015/08/04 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python异常的检测和处理方法
2018/10/26 Python
python代码编写计算器小程序
2020/03/30 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
综合办公室主任职责
2013/12/16 职场文书
中学生打架检讨书
2014/02/10 职场文书
好听的队名和口号
2014/06/09 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2015年中个人总结范文
2015/03/10 职场文书
如何写新闻稿
2015/07/18 职场文书
新郎新娘致辞
2015/07/31 职场文书