最近在做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。