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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
JS数组的常见用法实例
Feb 10 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
整理一下常见的IE错误
Nov 18 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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输出xml必须header的解决方法
2014/10/17 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
HTTP状态码详解
2021/03/18 杂记
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
创先争优活动方案
2014/02/12 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
导游词怎么写
2015/02/04 职场文书
公司人事任命通知
2015/04/20 职场文书
SpringBoot整合Minio文件存储
2022/04/03 Java/Android