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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

吕亚辉 2015-01-29 14:09:00 浏览728

需要做成这种样式

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 });