dedecms模版制作活动的折叠菜单

需要做成这种样式

url请求为这样:

1 http://m03.com/plus/list.php?tid=19

这些菜单项都有对应的tid项,页面刷新后,应该将所有的菜单折叠起来,对于tid=19的菜单项,要判断他是否是子菜单,如果是子菜单,应该讲它所在的整个菜单项打开并将它自身加上active样式,否则不用打开整个菜单,直接加active样式。并且如果当前菜单下没有子菜单,应该讲菜单项前的按钮去除。

这里准备了两张图片

right_g.png和bottom_g.png

首先结合dedecms模板代码生成折叠菜单
复制代码
 1 <ul class="flod_menu">
 2     {dede:channelartlist row=5 typeid=10} 
 3     <li {dede:field name='typeid' runphp="yes"}@me = (@me==$_GET['tid'] && @me!=10 ? 'class="flod_menu_item active_top"' : 'class="flod_menu_item"');{/dede:field}>
 4         <img src="{dede:global.cfg_templets_skin/}/images/arrow/right_g.png" class="btn"/>
 5         <a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></span>
 6         <ul class="flod_menu_sub">
 7             {dede:sql sql='Select * from dede_arctype where reid=~id~  ORDER BY id limit 0,7'}
 8             <li  [field:id runphp="yes"]@me = (@me==$_GET['tid'] && @me!=10 ? 'class="flod_menu_item_sub active"' : 'class="flod_menu_item_sub"');[/field:id]><a href='[field:typedir function='str_replace("{cmspath}","",@me)'/]' target='_blank'>[field:typename/]</a></li>
 9             {/dede:sql}
10         </ul>
11     </li>
12     {/dede:channelartlist}
13 </ul>
复制代码

这里有些知识,比如如何在dedecms模板中生成三级菜单,以及如何获取url中的请求参数($_GET['XXX'])。

然后再通过JavaScript代码折叠或打开菜单,去除多余的按钮
复制代码
 1 //对于没有下级菜单的,将按钮隐藏
 2 $(".flod_menu .flod_menu_item > .btn").each(function(index,element){
 3     var hasLi = $(this).nextAll(".flod_menu_sub").children().is("li");
 4     if(!hasLi){
 5         $(this).css("display","none");
 6     }
 7 });
 8 //找到当前活动的节点
 9 $(".flod_menu_sub").each(function(index,element){
10     var isActive = $(this).children(".active").is("li");
11     if(isActive){
12         $(this).css("display","block");
13     }
14 });
15 //为按钮绑定单击事件
16 $(".flod_menu .flod_menu_item > .btn").click(function(){        
17     var cSrc = $(this).attr("src");
18 
19     if(cSrc.indexOf("right")>=0){
20         //处于折叠状态,进行打开
21         $(this).attr("src",cSrc.replace("right","bottom"));
22         $(this).nextAll(".flod_menu_sub").css("display","block");
23     }
24     else{
25         //处于打开状态,进行折叠
26         $(this).attr("src",cSrc.replace("bottom","right"));
27         $(this).nextAll(".flod_menu_sub").css("display","none");
28     }
29 });
复制代码

 

posted @   lvyahui  阅读(717)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示