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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
jquery实现提示语淡入效果
May 05 jQuery
JavaScript实现数值自动增加动画
Dec 28 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
PHP入门
2006/10/09 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
smarty简单入门实例
2014/11/28 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
php的常量和变量实例详解
2017/06/27 PHP
javascript中对对层的控制
2006/12/29 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
Python之os操作方法(详解)
2017/06/15 Python
Python全排列操作实例分析
2018/07/24 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
大学生见习报告范文
2014/11/03 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
Python中如何处理常见报错
2022/01/18 Python
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL