最近在做ERP系统，框架的菜单页面，采用了二级菜单的模式。需要使用折叠菜单。这个之前做过，但是出了学校之后就很久没有用过了，翻了翻文档。用JQuery实现了一下：
一个简单的二级菜单
1 <div class="bartitleFAQ"> 2 <button id="btn">服务管理 </button> 3 <div class="FAQlist"> 4 <ul> 5 <li><a href='#'> 等待提交</a></li> 6 <li><a href='#' title=''> 等待发布</a></li> 7 <li><a href='#' title=''> 正式项目</a></li> 8 <li><a href='#' title=''> 点此新增</a></li></ul> 9 </div>
我直接使用的JQuery逻辑实现：
1 $(document).ready(function(){ 2 //载入页面时，将二级菜单隐藏 3 $(".FAQlist").css("display","none"); 4 //点击事件 5 $("#btn").click(function(){ 6 //判断是否隐藏 7 if($(".FAQlist").css("display") == "none"){ 8 $(".FAQlist").css("display","block"); 9 }else{ 10 $(".FAQlist").css("display","none"); 11 } 12 }); 13 });
这样就可以实现一个简单的菜单折叠效果了。
改进：
后来我发现，菜单的折叠效果，使用的都是同一个逻辑，只是不同的按钮触发事件罢了。因此，我觉得将折叠效果的逻辑抽取成方法，可以提高代码的重用。
如下是连个二级菜单：
1 <div class="order"> 2 <button id="order_btn">订单管理</button> 3 </div> 4 <div class="order_list"> 5 <ul> 6 <li><a href="#">查看订单</a></li> 7 <li><a href="#">新建订单</a></li> 8 <li><a href="#">失败订单</a></li> 9 </ul> 10 </div> 11 12 <div class="user"> 13 <button id="user_btn" >用户管理</button> 14 </div> 15 <div class="user_list"> 16 <ul> 17 <li><a href="#">增加用户</a></li> 18 <li><a href="#">用户列表</a></li> 19 </ul> 20 </div>
JQuery：
1 $(document).ready(function(){ 2 //载入页面时，将二级菜单隐藏 3 //$(".order_list").css("display","none"); 4 $("div[class$='_list']").css("display","none"); 5 //点击订单事件 6 $("#order_btn").click(function(){ 7 8 tt(this); 9 /* if($(".order_list").css("display") == "none"){ 10 $(".order_list").css("display","block"); 11 }else{ 12 $(".order_list").css("display","none"); 13 } */ 14 }); 15 //点击user按钮事件 16 $("#user_btn").click(function(){ 17 18 tt(this); 19 20 }); 21 }); 22 //抽取逻辑的方法 23 function tt(val){ 24 cl=$(val).parent().attr("class"); 25 //alert($("."+cl+"_list").css("display") == "none"); 26 if($("."+cl+"_list").css("display") == "none"){ 27 $("."+cl+"_list").css("display","block"); 28 }else{ 29 $("."+cl+"_list").css("display","none"); 30 } 31 }
注意：
使用这个方法的话，页面的元素命名要采取一定约定规则。我的使用的规则是一级div为name，button是name_btn;二级div的命名为name_list。