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 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
axios基本入门用法教程
Mar 25 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
js实现抽奖功能
Nov 24 Javascript
vue elementUI表格控制对应列
Apr 13 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
JS 表单验证大全
2011/11/23 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
Node.js 8 中的重要新特性
2017/06/28 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python实现列表的排序方法分享
2019/07/01 Python
Python猴子补丁知识点总结
2020/01/05 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
总经理助理的职责
2014/03/14 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技