jquery 无限级联菜单案例分享


Posted in Javascript onMarch 26, 2013

看到phpcms的地区级联菜单,感觉写的挺有意思,就说说大致步骤,省得忘了。

对于地区级联菜单的生成一般是在/data/cache_model/content_form.class.php文件的areaid()函数中。不过,这个只是一个cache至于什么地方生成还不没找到,所以暂时作为一个测试。(知道的同学告诉我哈!十分感谢)

在areaid()的$js中添加

function delChild(num) 
{ 
$('#load_$field select').each(function(i,obj){ 
if(obj.id >num) 
$('#'+obj.id).remove(); 
}) 
}

对应的,在/load.php中elseif($field == 'areaid' && $value)修改
$str = 
'<select id="'.$id.'" 
onchange="delChild('.$id.');$(\'#'.$value.'\').val(this.value);this.disabled=false;area_load(this.value);"><option 
value="1">'.$LANG['please_select'].'</option>';

就能去掉"选定地区后不能更改"的效果,并且当没有下级地名时不会删除多余的选择框。
传统的级联菜单呢,个人觉得传输数据相对较大,而且和数据库的关联似乎不好,所以就不贴代码了。

方法二:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.menu li').hover(function(){ 
$(this).children('ul').show(); 
$(this).focus().addClass('focusa') 
},function(){ 
$(this).children('ul').hide(); 
$(this).focus().removeClass('focusa'); 
}); 
}); 
</script> 
<style type="text/css"> 
ul{ list-style:none; margin:0; padding:0;} 
.menu { height:30px; line-height:30px; } 
.menu li { float:left; position:relative;} /*这一级是导航*/ 
.menu li a { display:block; height:30px; line-height:30px; padding:0 20px; } 
.menu li a:hover { color:#000; background:url(img/bg1.png); } 
.menu li a.more { background:url(img/there.png) no-repeat 130px center; } 
.menu li ul { position:absolute; float:left; width:150px; border:1px solid #000; display:none;} /*这是第二级菜单*/ 
.menu li ul a { width:110px; } 
.menu li ul a:hover { background:url(img/bg1.png);} 
.menu li ul ul{ top:0;left:150px;} /*从第三级菜单开始,所有的子级菜单都相对偏移*/ 
</style> 
<ul class="menu"> 
<li><a href="#">菜单一</a> 
<ul class="one"> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#" class="more">菜单五</a> 
<ul class="two"> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#" class="more">菜单五</a> 
<ul class="three"> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#" class="more">菜单五</a> 
<ul class="four"> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单五</a></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#">菜单二</a> 
<ul class="one"> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#" class="more">菜单三</a> 
<ul class="two"> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#" class="more">菜单三</a> 
<ul class="three"> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单五</a></li> 
</ul> 
</li> 
<li><a href="#">菜单四</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单五</a> 
<ul class="one"> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单三</a></li> 
</ul> 
</li> 
</ul>
Javascript 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
Javascript实现单选框效果
Dec 09 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
js实现弹幕墙效果
Dec 10 Javascript
JSON辅助格式化处理方法
Mar 26 #Javascript
html+css+js实现xp window界面及有关功能
Mar 26 #Javascript
jquery图片放大镜功能的实例代码
Mar 26 #Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 #Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 #Javascript
JS上传前预览图片实例
Mar 25 #Javascript
js实现杯子倒水问题自动求解程序
Mar 25 #Javascript
You might like
php简单静态页生成过程
2008/03/27 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
详解JavaScript函数
2015/12/01 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python的Template使用指南
2014/09/11 Python
Python os模块学习笔记
2015/06/21 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python获取Pandas列名的几种方法
2019/08/07 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
详解Python IO口多路复用
2020/06/17 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
出国导师推荐信
2014/01/16 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
2015年除四害工作总结
2015/07/23 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript