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 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
jQuery中的select操作详解
Nov 29 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 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
杏林同学录(八)
2006/10/09 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python内存管理实例分析
2019/07/10 Python
Python绘图实现显示中文
2019/12/04 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
餐饮业的创业计划书范文
2013/12/26 职场文书
迟到检讨书1000字
2014/01/15 职场文书
商务经理岗位职责
2014/07/30 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
满月酒邀请函
2015/01/30 职场文书
护理专业自荐信范文
2015/03/06 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python