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.event兼容各浏览器的event详细解析
Dec 18 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
javascript常用方法总结
May 14 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
javascript实现简易计算器
Feb 01 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
Python探索之pLSA实现代码
2017/10/25 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
Ajax的优点和缺点
2014/11/21 面试题
怎么写好自荐信
2013/10/30 职场文书
高三语文教学反思
2014/01/15 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
辩护词范文大全
2015/05/21 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS