動態生成二級導航菜單

時間 2021-08-12

標籤 javascript html java jquery web ajax json jsp ide 欄目 JavaScript 简体版

原文原文鏈接

根據獲得的json數據動態生成二級導航菜單javascript

jsp:頁面html

  
  
           
  
  
   
   
            
   
   <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
   
   
            
   
   <% 
   
   
            
   
   String path = request.getContextPath(); 
   
   
            
   
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
   
   
            
   
   %> 
   
   
            
   
    
   
   
            
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
   
   
            
   
   <html> 
   
   
            
   
     <head> 
   
   
            
   
       <base href="<%=basePath%>"> 
   
   
            
   
        
   
   
            
   
       <title>My JSP 'testMent.jsp' starting page</title> 
   
   
            
   
        
   
   
            
   
       <meta http-equiv="pragma" content="no-cache"> 
   
   
            
   
       <meta http-equiv="cache-control" content="no-cache"> 
   
   
            
   
       <meta http-equiv="expires" content="0">     
   
   
            
   
       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
   
   
            
   
       <meta http-equiv="description" content="This is my page"> 
   
   
            
   
       <style> 
   
   
            
   
   *{ 
   
   
            
   
       margin:0; 
   
   
            
   
       padding:0; 
   
   
            
   
   } 
   
   
            
   
   .clear:after { 
   
   
            
   
       clear: both; 
   
   
            
   
       content: "."; 
   
   
            
   
       display: block; 
   
   
            
   
       height: 0; 
   
   
            
   
       visibility: hidden; 
   
   
            
   
   } 
   
   
            
   
   nav{ 
   
   
            
   
       display:inline-block; 
   
   
            
   
       border:1px solid #505255; 
   
   
            
   
       border-bottom: 1px solid #282C2F; 
   
   
            
   
       -moz-border-radius: 5px; 
   
   
            
   
       -webkit-border-radius: 5px; 
   
   
            
   
       margin:50px; 
   
   
            
   
       -webkit-box-shadow:1px 1px 3px #292929; 
   
   
            
   
       -moz-box-shadow:1px 1px 3px #292929; 
   
   
            
   
   } 
   
   
            
   
   li{ 
   
   
            
   
       list-style:none; 
   
   
            
   
       float:left; 
   
   
            
   
       border-right: 1px solid #2E3235; 
   
   
            
   
       position: relative; 
   
   
            
   
       /*background: -moz-linear-gradient(top, #fff, #555D5F 2% ,#555D5F  50%,#3E4245 100%); 
   
   
            
   
       background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #555D5F), color-stop(50%, #555D5F),to(#3E4245));*/ 
   
   
            
   
       background:#555D5F; 
   
   
            
   
   } 
   
   
            
   
   li:hover{ 
   
   
            
   
       /*background: -moz-linear-gradient(top, #fff, #3E4245 2% ,#555D5F  80%,#555D5F 100%); 
   
   
            
   
       background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #3E4245), color-stop(80%, #3E4245),to(#555D5F));*/ 
   
   
            
   
       background:#3E4245; 
   
   
            
   
       -moz-transition: background 1s ease-out; 
   
   
            
   
       -webkit-transition: background 1s ease-out; 
   
   
            
   
   } 
   
   
            
   
   li a{ 
   
   
            
   
       display:block; 
   
   
            
   
       height:40px; 
   
   
            
   
       line-height:40px; 
   
   
            
   
       padding:0 30px; 
   
   
            
   
       font-size:12px; 
   
   
            
   
       color:#fff; 
   
   
            
   
       text-shadow: 0px -1px 0px #000; 
   
   
            
   
       text-decoration:none; 
   
   
            
   
       white-space:nowrap; 
   
   
            
   
       border-left: 1px solid #999E9F; 
   
   
            
   
       border-top: 1px solid #999E9F; 
   
   
            
   
       -moz-border-top-left-radius: 2px; 
   
   
            
   
       -webkit-border-top-left-radius: 2px; 
   
   
            
   
        
   
   
            
   
       z-index:100; 
   
   
            
   
   } 
   
   
            
   
   li > a{ 
   
   
            
   
       position:relative; 
   
   
            
   
   } 
   
   
            
   
   li.first a{ 
   
   
            
   
       -moz-border-radius-topleft: 4px; 
   
   
            
   
       -moz-border-radius-bottomleft: 4px; 
   
   
            
   
       -webkit-border-top-left-radius: 4px; 
   
   
            
   
       -webkit-border-bottom-left-radius: 4px; 
   
   
            
   
   } 
   
   
            
   
   li.last{ 
   
   
            
   
       border-right: 0 none; 
   
   
            
   
   } 
   
   
            
   
    
   
   
            
   
    
   
   
            
   
   dl{ 
   
   
            
   
       position:absolute; 
   
   
            
   
       display:block; 
   
   
            
   
       top:40px; 
   
   
            
   
       left: -25px; 
   
   
            
   
        
   
   
            
   
       width:165px; 
   
   
            
   
        
   
   
            
   
       background:#222222; 
   
   
            
   
       -moz-border-radius: 5px; 
   
   
            
   
       -webkit-border-radius: 5px; 
   
   
            
   
        
   
   
            
   
       -webkit-box-shadow:1px 1px 3px #292929; 
   
   
            
   
       -moz-box-shadow:1px 1px 3px #292929; 
   
   
            
   
        
   
   
            
   
       z-index:10; 
   
   
            
   
                
   
   
            
   
   } 
   
   
            
   
   li:hover dl{ 
   
   
            
   
       top:50px; 
   
   
            
   
       display:block; 
   
   
            
   
       width:145px; 
   
   
            
   
       padding:10px; 
   
   
            
   
   } 
   
   
            
   
   dl a{ 
   
   
            
   
       background:transparent; 
   
   
            
   
       border:0 none; 
   
   
            
   
       -moz-border-radius: 5px; 
   
   
            
   
       -webkit-border-radius: 5px; 
   
   
            
   
       -moz-transition: background 0.5s ease-out; 
   
   
            
   
       -webkit-transition: background 0.5s ease-out; 
   
   
            
   
        
   
   
            
   
       z-index:50; 
   
   
            
   
   } 
   
   
            
   
   dl a:hover{ 
   
   
            
   
       color:#FFF; 
   
   
            
   
       background:#999E9F; 
   
   
            
   
       -moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; 
   
   
            
   
       -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; 
   
   
            
   
   } 
   
   
            
   
   dd{ 
   
   
            
   
       margin-top:-40px; 
   
   
            
   
       opacity:0; 
   
   
            
   
       width:145px; 
   
   
            
   
       -webkit-transition-property:all; 
   
   
            
   
       /*-webkit-transition-timing-function: cubic-bezier(5,0,5,0);*/ 
   
   
            
   
       -moz-transition-property: all; 
   
   
            
   
       /*-moz-transition-timing-function: cubic-bezier(5,0,5,0);*/ 
   
   
            
   
       /*-webkit-transition-delay:5s; 
   
   
            
   
       -moz-transition-delay:5s;*/ 
   
   
            
   
   } 
   
   
            
   
   li:hover dd{ 
   
   
            
   
       margin-top:0; 
   
   
            
   
       opacity:1; 
   
   
            
   
   } 
   
   
            
   
   li dd:nth-child(1){ 
   
   
            
   
       -webkit-transition-duration: 0.1s; 
   
   
            
   
       -moz-transition-duration: 0.1s; 
   
   
            
   
   } 
   
   
            
   
   li dd:nth-child(2){ 
   
   
            
   
       -webkit-transition-duration: 0.2s; 
   
   
            
   
       -moz-transition-duration: 0.2s; 
   
   
            
   
   } 
   
   
            
   
   li dd:nth-child(3){ 
   
   
            
   
       -webkit-transition-duration: 0.3s; 
   
   
            
   
       -moz-transition-duration: 0.3s; 
   
   
            
   
   } 
   
   
            
   
   li dd:nth-child(4){ 
   
   
            
   
       -webkit-transition-duration: 0.4s; 
   
   
            
   
       -moz-transition-duration: 0.4s; 
   
   
            
   
   } 
   
   
            
   
   dt{ 
   
   
            
   
       display:none; 
   
   
            
   
       margin-top:-25px; 
   
   
            
   
       padding-top:15px; 
   
   
            
   
       height:10px; 
   
   
            
   
   } 
   
   
            
   
   li:hover dt{ 
   
   
            
   
       display:block; 
   
   
            
   
   } 
   
   
            
   
   .Darrow{ 
   
   
            
   
       float:right; 
   
   
            
   
       margin:18px 10px 0 0; 
   
   
            
   
       border-width:5px; 
   
   
            
   
       border-color:#FFF transparent transparent transparent; 
   
   
            
   
       border-style:solid; 
   
   
            
   
       width:0; 
   
   
            
   
       height:0; 
   
   
            
   
       line-height:0; 
   
   
            
   
       overflow:hidden; 
   
   
            
   
        
   
   
            
   
       cursor:pointer; 
   
   
            
   
        
   
   
            
   
       text-shadow: 0px -1px 0px #000; 
   
   
            
   
        
   
   
            
   
       -webkit-box-shadow:0px -1px 0px #000; 
   
   
            
   
       -moz-box-shadow:0px -1px 0px #000; 
   
   
            
   
   } 
   
   
            
   
   .arrow{ 
   
   
            
   
       margin:0 auto; 
   
   
            
   
       margin-top:-5px; 
   
   
            
   
       display:block; 
   
   
            
   
       width:10px; 
   
   
            
   
       height:10px; 
   
   
            
   
       background:#222222; 
   
   
            
   
       -webkit-transform: rotate(45deg); 
   
   
            
   
       -moz-transform: rotate(45deg); 
   
   
            
   
   } 
   
   
            
   
   </style> 
   
   
            
   
       <script type="text/javascript" src="javascript/jquery.min.js"></script> 
   
   
            
   
       <script type="text/javascript"> 
   
   
            
   
       function test(){ 
   
   
            
   
        var s=''; 
   
   
            
   
          $.ajax({ 
   
   
            
   
           type:'get',//請求方式 
   
   
            
   
           url:'json.json', // AJAX HTTP請求接口 'json.json'
   
   
            
   
           data:'', 
   
   
            
   
           dataType:'json',//請求類型爲json 
   
   
            
   
           timeout:7000,//請求超時後中止請求 
   
   
            
   
           success: function(json){ 
   
   
            
   
            var d=json; 
   
   
            
   
              
   
   
            
   
              $.each(d,function(i){ 
   
   
            
   
               
   
   
            
   
                 if(typeof d[i].children != "undefined" && d[i].children.length >0) 
   
   
            
   
                   { 
   
   
            
   
                   s+= '<li><span class="Darrow"></span><a href="#">'+d[i].text+'</a><dl><dt><span class="arrow"></span></dt>'; 
   
   
            
   
                   $.each(d[i].children,function(j){ 
   
   
            
   
                   s+=' <dd><a href="#">'+d[i].children[j].text+'</a></dd>'; 
   
   
            
   
                   }); 
   
   
            
   
                   s+='</dl></li>'; 
   
   
            
   
                    
   
   
            
   
                   } 
   
   
            
   
                   else 
   
   
            
   
                   { 
   
   
            
   
                       s+='<li class="first"><a href="#">'+d[i].text+'</a></li>'; 
   
   
            
   
                   } 
   
   
            
   
                    
   
   
            
   
               });           
   
   
            
   
                $('#out').html(s); 
   
   
            
   
       } 
   
   
            
   
       }); 
   
   
            
   
    
   
   
            
   
       } 
   
   
            
   
        
   
   
            
   
       </script> 
   
   
            
   
    
   
   
            
   
     </head> 
   
   
            
   
      
   
   
            
   
     <body> 
   
   
            
   
       <input type="button" onclick="test()" value="點擊生成菜單"> 
   
   
            
   
      
   
   
            
   
    <nav> 
   
   
            
   
       <ul class="clear" id="out"> 
   
   
            
   
            
   
   
            
   
       </ul> 
   
   
            
   
   </nav> 
   
   
            
   
     </body> 
   
   
            
   
   </html>

json數據頁面:java

  
  
           
  
  
   
   
            
   
   [ 
   
   
            
   
   {"id":"90","text":"menu1","children":[{"id":"9010","text":"chidren1","children":[],"leaf":true,"iconCls":"menu-11","url":"jsp/sysManger/role.jsp"},{"id":"9020","text":"chidren2","children":[],"leaf":true,"iconCls":"menu-12","url":"jsp/sysManger/user.jsp"},{"id":"9030","text":"chidren3","children":[],"leaf":true,"iconCls":"menu-13","url":"jsp/sysManger/data.jsp"}],"leaf":false,"iconCls":"menu-1","url":null} 
   
   
            
   
   ,{"id":"90","text":"menu2","leaf":false,"iconCls":"menu-1","url":null} 
   
   
            
   
   ,{"id":"90","text":"menu3","children":[{"id":"9010","text":"chidren1","children":[],"leaf":true,"iconCls":"menu-11","url":"jsp/sysManger/role.jsp"},{"id":"9020","text":"chidren2","children":[],"leaf":true,"iconCls":"menu-12","url":"jsp/sysManger/user.jsp"},{"id":"9030","text":"chidren3","children":[],"leaf":true,"iconCls":"menu-13","url":"jsp/sysManger/data.jsp"}],"leaf":false,"iconCls":"menu-1","url":null} 
   
   
            
   
   ,{"id":"90","text":"menu4","children":[{"id":"9010","text":"chidren1","children":[],"leaf":true,"iconCls":"menu-11","url":"jsp/sysManger/role.jsp"},{"id":"9020","text":"chidren2","children":[],"leaf":true,"iconCls":"menu-12","url":"jsp/sysManger/user.jsp"},{"id":"9030","text":"chidren3","children":[],"leaf":true,"iconCls":"menu-13","url":"jsp/sysManger/data.jsp"}],"leaf":false,"iconCls":"menu-1","url":null} 
   
   
            
   
   ]