关于左侧菜单栏，点击二级菜单栏展开

最新推荐文章于 2025-06-09 13:06:49 发布

alex_mmg

最新推荐文章于 2025-06-09 13:06:49 发布

阅读量6.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/alex_mmg/article/details/77972241

本文探讨了左侧菜单栏与右侧列表同步刷新的问题，提出了一种解决方案：通过Java实现HTML标签的递归遍历，确保点击二级菜单时仅展开而不全页面刷新，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里左侧菜单栏，跟右边的列表，详细信息，每次点击都同时刷新，每次菜单栏都闭合，所以就想了如此办法：首先一开始用的Java写的HTML标签如下，利用递归查出所有菜单

menuString.append("<a id="+parent.getId()+"  onClick=\"jump('"+href+"','"+parent.getId()+"');\"><i class=\"fa "+parent.getIcon()+"\">

</i> <span class=\"nav-label\">"+parent.getName()+"</span></a>");

在左侧菜单jsp文件里将parent.getId()获取保存起来，这里保存如下利用HTML5特性

<script type="text/javascript">
    $(document).ready(function(){
        var getId=localStorage.getItem("id");
        $("#"+getId).parent().addClass("active");//增加高亮度
        $("#"+getId).parent().parent().parent().addClass("active");//负责展开

	//这里的首页暂时没做，所以先这样判断，等后面做了，就不需要这些了
        if (getId !=null){
            $("#index").removeClass("active");
        }
    });
function jump(href,id){
   var localStorage=window.localStorage;
    localStorage.setItem("id",id);
    window.location.href=href;
}
</script>

//这个类遍历所有菜单，包括一级，二级

public class MenuTag extends TagSupport {
   private static final long serialVersionUID = 1L;
   protected Menu menu;//菜单Map
   
   

   public Menu getMenu() {
      return menu;
   }

   public void setMenu(Menu menu) {
      this.menu = menu;
   }

   public int doStartTag() throws JspTagException {
      return EVAL_PAGE;
   }

   public int doEndTag() throws JspTagException {
      try {
         JspWriter out = this.pageContext.getOut();
         String menu = (String) this.pageContext.getSession().getAttribute("menu");
         if(menu!=null){
            out.print(menu);
         }else{
            menu=end().toString();
            out.print(menu);
            
         }
         
      } catch (IOException e) {
         e.printStackTrace();
      }
      return EVAL_PAGE;
   }

   public StringBuffer end() {
      StringBuffer sb = new StringBuffer();
      sb.append(getChildOfTree(menu,0, UserUtils.getMenuList()));
      
      System.out.println(sb);
      return sb;
      
   }
   
   private static String getChildOfTree(Menu parent, int level, List<Menu> menuList) {
      StringBuffer menuString = new StringBuffer();
      String href = "";
      if (!parent.hasPermisson())
         return "";
      if (level > 0) {//level 为0是功能菜单

         menuString.append("<li>");

         ServletContext context = SpringContextHolder
               .getBean(ServletContext.class);
         if (parent.getHref() != null && parent.getHref().length() > 0) {
            
            
            if (parent.getHref().startsWith("http://")) {// 如果是互联网资源
               href =  parent.getHref();
            } else if(parent.getHref().endsWith(".html")&&!parent.getHref().endsWith("ckfinder.html")){//如果是静态资源并且不是ckfinder.html，直接访问不加adminPath
               href = context.getContextPath() + parent.getHref();
            }else{
               href = context.getContextPath() + Global.getAdminPath()
               + parent.getHref();
            }
         }
      }


      if ((parent.getHref() == null || parent.getHref().trim().equals("")) && parent.getIsShow().equals("1")) {//如果是父节点且显示
         if (level > 0) {
         menuString
               .append("<a href=\""
                     + href
                     + "\"><i class=\"fa "+parent.getIcon()+"\"></i> <span class=\"nav-label\">"
                     + parent.getName()
                     + "</span><span class=\"fa arrow\"></span></a>");
         }
         if (level == 1) {
            menuString.append("<ul class=\"nav nav-second-level\">");
         } else if (level == 2) {
            menuString.append("<ul class=\"nav nav-third-level\">");
         } else if (level == 3) {
            menuString.append("<ul class=\"nav nav-forth-level\">");
         } else if (level == 4) {
            menuString.append("<ul class=\"nav nav-fifth-level\">");
         }
         for (Menu child : menuList) {
            if (child.getParentId().equals(parent.getId())&&child.getIsShow().equals("1")) {
               menuString.append(
                     getChildOfTree(child, level + 1, menuList));
            }
         }
         if (level > 0) {
         menuString.append("</ul>");
            
         }
      } else {
         /*menuString.append("<a class=\"J_menuItem\"  href=\"" + href
               + "\" ><i class=\"fa "+parent.getIcon()+"\"></i> <span class=\"nav-label\">"+parent.getName()+"</span></a>");*/
         menuString.append("<a id="+parent.getId()+"  onClick=\"jump('"+href+"','"+parent.getId()+"');\"><i class=\"fa "+parent.getIcon()+"\"></i> <span class=\"nav-label\">"+parent.getName()+"</span></a>");
      }
      if (level > 0) {
         menuString.append("</li>");
      }

      return menuString.toString();
   }
   
   

}