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