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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
JQuery工具函数汇总
Jun 15 Javascript
老生常谈js中的MVC
Jul 25 Javascript
JavaScript门面模式详解
Oct 19 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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文件下载类
2006/12/06 PHP
PHP在线书签系统分享
2016/01/04 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
popdiv
2006/07/14 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
学习Vue组件实例
2018/04/28 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python类的继承和多态代码详解
2017/12/27 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python3实现猜数字游戏
2020/12/07 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
安装PyInstaller失败问题解决
2019/12/14 Python
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
酒店总经理工作职责
2013/12/13 职场文书
社团活动总结格式
2014/08/29 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
车贷收入证明范本
2014/09/14 职场文书
劳模事迹材料范文
2014/12/24 职场文书
大学毕业生自我评价
2015/03/02 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
保外就医申请书范文
2015/08/06 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript