项目过程中，有客户要求三级菜单，现在原有二级菜单的基础上扩展。本文像素级记录扩展过程，备忘。

准备

找到修改的切入点。

如上图，项目是左右iframe布局的，菜单部分在左侧。 找到index.jsp,跟踪left iframe的请求，跳转到menuTree.jsp。

分析

确定修改思路。

menuTree.jsp展现菜单的代码如下：

    
        
             
             
                 
                      
       
                    
        
                        
          ${menu.name}                    
        
                    
        
                        
         
 
          
 
            
             
             
  ${menuChild.name} 
 
              
             
            
          
 
         
                    
        
                
       
            
              
         
    

可以看出，2、3行el表达式定义了需要显示的菜单数据，下面的代码则是对这些数据按照层级进行显示处理。4、13行代码是具体的遍历操作，假如我们要显示第三级菜单，则需要在13行代码定义的循环中再加一层循环即获取二级菜单的子菜单并展示。

修改

具体修改过程和产出代码。

三级菜单和二级菜单的显示略有不同，现在默认把二级菜单加载为指向具体页面的a标签。添加三级标签，必须把二级菜单的加载为下拉列表，且不能默认加载为下拉列表（多数二级菜单下是没有三级菜单的）。

在这里，添加方法判断二级菜单是否拥有可显示子菜单(根据结果，确定二级菜单的加载方式，链接或者下拉列表)：

                                                
                                                    
                                                          ${menuChild.name}                                                                                                
                                                 
    

@SuppressWarnings("unchecked")    @Transient    public boolean hasChild(String id){        boolean hasChild=false;        Map
    
      map = Maps.newHashMap();        Subject subject = SecurityUtils.getSubject();        Principal principal = (Principal)subject.getPrincipal();        if(principal!=null){            map=principal.getCacheMap();        }        List
     
       menuList = (List
      
       )map.get("menuList");        for (Menu menu : menuList) {            if(menu.getIsShow().equals("1")&&menu.getParent()!=null&&id.equals(menu.getParentId())){                hasChild=true;                break;            }        }        return hasChild;    }
      
     
    

三级菜单添加成功后，左侧菜单的宽度不足，根据需要调整左侧菜单iframe的宽度。

另外，假日三级菜单位于第一个二级菜单下，会出现右侧内容页空白，做以下修改： 原代码：

$(".accordion-body a:first i").click();

现代码：

if($(".accordion-body a:first").attr("href").indexOf("#collapse")==-1){                $(".accordion-body a:first i").click();            }else{                $(".myAccordion-body a:first i").click();            }

以上就是添加三级菜单的全过程，中间也经历了不少的波折，学习了不少el的用法。