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

需要做成这种样式

url请求为这样：

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

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

这里准备了两张图片

right_g.png和bottom_g.png

首先结合dedecms模板代码生成折叠菜单

 <ul class="flod_menu">
     {dede:channelartlist row=5 typeid=10}
     <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}>
         <img src="{dede:global.cfg_templets_skin/}/images/arrow/right_g.png" class="btn"/>
         <a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></span>
         <ul class="flod_menu_sub">
             {dede:sql sql='Select * from dede_arctype where reid=~id~  ORDER BY id limit 0,7'}
             <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>
             {/dede:sql}
         </ul>
     </li>
     {/dede:channelartlist}
 </ul>

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

然后再通过JavaScript代码折叠或打开菜单，去除多余的按钮

 //对于没有下级菜单的，将按钮隐藏
 $(".flod_menu .flod_menu_item > .btn").each(function(index,element){
     var hasLi = $(this).nextAll(".flod_menu_sub").children().is("li");
     if(!hasLi){
         $(this).css("display","none");
     }
 });
 //找到当前活动的节点
 $(".flod_menu_sub").each(function(index,element){
     var isActive = $(this).children(".active").is("li");
     if(isActive){
         $(this).css("display","block");
     }
 });
 //为按钮绑定单击事件
 $(".flod_menu .flod_menu_item > .btn").click(function(){
     var cSrc = $(this).attr("src");

     if(cSrc.indexOf("right")>=0){
         //处于折叠状态,进行打开
         $(this).attr("src",cSrc.replace("right","bottom"));
         $(this).nextAll(".flod_menu_sub").css("display","block");
     }
     else{
         //处于打开状态,进行折叠
         $(this).attr("src",cSrc.replace("bottom","right"));
         $(this).nextAll(".flod_menu_sub").css("display","none");
     }
 });