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函数
Dec 22 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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 array_slice函数的使用以及参数详解
2008/08/30 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python实现汉诺塔方法汇总
2016/07/25 Python
python 实现逻辑回归
2020/12/30 Python
美国Max仓库:Max Warehouse
2020/05/31 全球购物
strstr()的简单实现
2013/09/26 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
职务说明书范文
2014/05/07 职场文书
在职证明范本
2015/06/15 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL