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实现表格数据的动态添加与统计的代码
Jan 31 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
PyQt5实现简单的计算器
2020/05/30 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
护理职业生涯规划书
2014/01/24 职场文书
亲属关系公证书
2014/04/08 职场文书
运动员口号
2014/06/09 职场文书
新党章心得体会
2014/09/04 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
公司出纳岗位职责
2015/03/31 职场文书
超市收银员岗位职责
2015/04/07 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
热爱劳动主题班会
2015/08/14 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python