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 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
php的常量和变量实例详解
2017/06/27 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
js Dialog 实践分享
2012/10/22 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python中list循环语句用法实例
2014/11/10 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
一篇.NET面试题
2014/09/29 面试题
本科生个人求职自荐信
2013/09/26 职场文书
八一建军节活动方案
2014/02/10 职场文书
意向书范文
2014/03/31 职场文书
自我推荐信范文
2014/05/09 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
python 学习GCN图卷积神经网络
2022/05/11 Python