需要做成这种样式
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 });
