ul li 3级动态菜单

ul li 3级动态菜单 有做过的没，，做了的贴代码！！或者留个Q我联系你！！javajsp

解决方案 »

  1.   

    <!-- 第一级 -->
    <c:forEach items="${startmenulist}" var="o" varStatus="i">
    <c:choose>
    <c:when test="${o.menuFlag!='0'}">
    <li class="eheadlink">
    <a href="#" class="${o.menuClass}">${o.menuName}</a>
    <!-- 第二级 -->
    <ul class="erji">
    <c:forEach items="${o.menuChild}" var="o" varStatus="i">
    <c:choose>
    <c:when test="${o.menuFlag!='0'}">
    <li class="sheadlink">
    <a href="#" class="bg er">${o.menuName}</a>
    <!-- 第三级 -->
    <ul class="sanjiwj">
    <c:forEach items="${o.menuChild}" var="o" varStatus="i">
    <li>
    <a href="#"  onclick="reloadpage('${o.menuUrl}')">${o.menuName}</a>
    </li>
    </c:forEach>
    </ul>
    <!-- 第三级结束 -->
    </li>
    </c:when>
    <c:otherwise>
    <c:choose>
    <c:when test="${o.menuName=='新建事务'}">
    <li class="sheadlink">
    <a href="#" class="bg er">${o.menuName}</a>
    <ul class="sanji" id="xjsw">
    <li>
    <a href="#"  onclick="openNewWin('qingshiApproval.do?method=newadd&key=qingshiApproval');">请示审批</a>
    <c:choose>
    <c:when test="${fn:contains(s, '请示审批')}"></c:when>
    <c:otherwise>
    <em onclick="ajaxAdd('请示审批','qingshiApproval.do?method=newadd&key=qingshiApproval');"></em>
    </c:otherwise>
    </c:choose>
    </li>
    </ul>
    </li>
    </c:when>
    <c:otherwise>
    <li>
    <a href="#" onclick="reloadpage('${o.menuUrl}')">${o.menuName}</a>
    </li>
    </c:otherwise>
    </c:choose>
    </c:otherwise>
    </c:choose>


    <!-- 新建事务  自定义 -->

    </c:forEach>
    </ul>
    <!-- 第二级结束 -->

    </li>
    </c:when>
    <c:otherwise>
    <li>

    <c:choose>
    <c:when test="${o.menuName=='首页'}">
    <a href="#" onclick="change(1)" class="${o.menuClass}">${o.menuName}</a>
    </c:when>
    <c:otherwise>
    <a href="#" onclick="reloadpage('${o.menuUrl}')" class="${o.menuClass}">${o.menuName}</a>
    </c:otherwise>
    </c:choose>
    </li>
    </c:otherwise>
    </c:choose>
    </c:forEach>
    <!-- 第一级结束 -->
      

  2.   

    这个是我去年做的li菜单（一部分2级，一部分3级，还有一部分4级）,其中很多和父容器交互的， 你只看折叠部分就好了。<%@page contentType="text/html;charset=UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <c:set var="ctx" value="${pageContext.request.contextPath}"/>
    <%
    pageContext.setAttribute("ext", "scripts/ext-2.0.2");
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>系统左侧</title>
    <%@ include file="/common/taglibs.jsp"%>
    <link href="${ctx}/system/css/master.css" rel="stylesheet" type="text/css" />
    <script src="${ctx}/common_res/js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    var leftFlag = true;//标志位，标志菜单列表否折叠
    var changeSize = 30;  //折叠之后的宽度
    var leftFrame = 0;
    var rightFrame = 0;
    var timeFlag=null;
    var selectedRootNum=-1; 
    var selectedParentNum=-1; 
    var selectedSonNum=-1; 
    var hideUlHTML="";    //隐藏折叠的内容
    var divFlag=false;    // 标志 子页面离开焦点时是否折叠，默认否 $(document).ready(function(){
    leftFrame=window.parent.leftFrameWidth;
    rightFrame=window.parent.rightFrameWidth;
    resizeLeft();
    addImgClick("r_float");
    addImgClick("index_left");
    liclick();
    window.parent.mainForward('${ctx}/system/xx.action',null);
    /*
    $(".index_left li.root").css("opacity",'0.8');
    var roots = $(".index_left li.root");
    for(var i=0;i<roots.length;i++){
    $("#"+roots[i].id).children("a:eq(0)").hover(
    function() { 
    $(this).css("background-image","url(${ctx}/system/images/images/list_2.jpg)").animate({ opacity: '1'},100);
    }, 
    function() { 
    $(this).css("background-image","url(${ctx}/system/images/images/list_1.jpg)").animate({ opacity: '0.8'},100);
    }
    );
    }
    */
    });

    //root下的a标签的事件列表
    function a_mousedown(rootId){
    if($("#"+rootId).children("a").css("background-image")=="url(${ctx}/system/images/images/list_5.jpg)"){
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_4.jpg)");
    }else{
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_1.jpg)");
    }
    }
    function a_mouseover(rootId){
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_2.jpg)");
    }
    function a_mouseout(rootId){
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_1.jpg)");
    }

    //为所有的li点击注册阻止冒泡
    function liclick(){
    $("li").click(function(){
    if(window.parent.Sys.firefox){   //ie不完全支持W3c标准，ff完全支持w3c
    arguments[0].stopPropagation();
    }else{
    event.cancelBubble=true;
    }
    });
    } function addImgClick(className){
    $("."+className).click(function(){
    if(!(this.innerHTML!="" && leftFlag)){
    if(window.parent.Sys.firefox){   //ie不完全支持W3c标准，ff完全支持w3c
    arguments[0].stopPropagation();
    }else{
    event.cancelBubble=true;
    }
    var leftFrame_width = leftFrame;
    var mainFrame_width = parseInt($("#mainFrame",parent.document).css("width"));
    var rightFrame_width = parseInt($("#rightFrame",parent.document).css("width"));
    if(!leftFlag){ //展开
    /*
    $("#leftFrame",parent.document).animate({
    width:leftFrame_width
    },1000);
    $("#mainFrame",parent.document).animate({
    width:parseInt($(".main",parent.document).css("width"))-leftFrame_width-rightFrame_width-window.parent.temp
    },1000);
    */
    $("#leftFrame",parent.document).css("width",leftFrame_width);
    $("#mainFrame",parent.document).css("width",parseInt($(".main",parent.document).css("width"))-leftFrame_width-rightFrame_width-window.parent.temp);
    $(".index_left").html(hideUlHTML);   //把隐藏的内容重新展现出来，由于image的点击事件是ready中添加的，所以要重新注册
    addImgClick("r_float");  //内容清空 重新注册
    liclick();
    if(this.innerHTML!=""){divFlag=true;}
    //修改图片
    $(".r_float").attr("src","${ctx}/system/images/images/ico_l.jpg");
    $(".r_float").attr("title","折叠");
    leftFlag=true;
    }else{    //折叠
    /*
    $(".index_left").css("overflow","hidden");
    $("#leftFrame",parent.document).animate({
    width:changeSize
    },1000);
    $("#mainFrame",parent.document).animate({
    width:mainFrame_width+(leftFrame_width-changeSize)
    },1000);
    */
    $("#leftFrame",parent.document).css("width",changeSize);
    $("#mainFrame",parent.document).css("width",mainFrame_width+(leftFrame_width-changeSize));

    hideUlHTML =$(".index_left").html();
    var roots = $(".index_left ul li.root");
    for(var i=0;i<roots.length;i++){
    if(i!=0){$("#"+roots[i].id).hide("fast");}
    else{$("#"+roots[i].id+" ul").hide("fast");$("#"+roots[i].id).eq(0).removeAttr("onclick");}
    }
    //修改图片
    $(".r_float").attr("src","${ctx}/system/images/images/ico_r.jpg");
    $(".r_float").attr("title","展开");
    leftFlag=false;
    }
    resizeLeft();
    }
    });
    }

    //根板块之间的单击事件
    function changeRoot(rootNum,parentNum,indexHref){
    if(typeof(parentNum)=="undefined"){parentNum=0;}
    var rootId=$(".index_left ul").children("li.root").eq(rootNum).attr("id");
    var selectedRootId = $(".index_left ul").children("li.root").eq(selectedRootNum).attr("id");
    var parentSize = $("#"+rootId+" ul").children("li.parent").length;
    var sonSize = $("#"+rootId+" ul").children("li.parent").eq(0).children("ul").children("li.son").length;
    var subSonSize = $("#"+rootId+" ul").children("li.parent").eq(0).children("ul").children("li.son").eq(0).children("ul").children("li.subSon").length;
    if(selectedRootNum==rootNum){
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_2.jpg)");
    $("#"+rootId+" ul li.parent").css("display","none").children("ul").children("li.son").css("display","none").children("ul").children("li.subSon").css("display","none");
    $("#"+rootId).children("a").unbind("mouseover").bind("mouseover",function(){
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_2.jpg)");
    });
    $("#"+rootId).children("a").unbind("mouseout").bind("mouseout",function(){
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_1.jpg)");
    });
    //将上一次点击的li.root还原
    $("#"+selectedRootId).css("height",32);
    $("#"+selectedRootId+" ul").children("li.parent").eq(selectedParentNum).css("height",32).children("ul").children("li.son").eq(selectedSonNum).css("height",32);

    selectedRootNum=-1;
    }else{
    $("#"+rootId+" ul li.parent").show();//css("display","block");
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_5.jpg)");
    $("#"+rootId).children("a").unbind("mouseover").bind("mouseover",function(){
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_5.jpg)");
    });
    $("#"+rootId).children("a").unbind("mouseout").bind("mouseout",function(){
    $("#"+rootId).children("a").css("background-image","url(${ctx}/system/images/images/list_4.jpg)");
    });
    $("#"+selectedRootId).children("ul").children("li.parent").css("display","none").children("ul").children("li.son").css("display","none").children("ul").children("li.subSon").css("display","none");
    $("#"+rootId+" ul li.parent").eq(parentNum).children("ul").children("li.son").css("display","block");

    $("#"+selectedRootId).children("a").css("background-image","url(${ctx}/system/images/images/list_1.jpg)");
    $("#"+selectedRootId).children("a").unbind("mouseover").bind("mouseover",function(){
    $("#"+selectedRootId).children("a").css("background-image","url(${ctx}/system/images/images/list_2.jpg)");
    });
    $("#"+selectedRootId).children("a").unbind("mouseout").bind("mouseout",function(){
    $("#"+selectedRootId).eq(selectedRootNum).children("a").css("background-image","url(${ctx}/system/images/images/list_1.jpg)");
    });
    //判断 是否有2级主菜单
    if(indexHref!="${ctx}"){
    window.parent.mainForward(indexHref,null);
    $("#"+rootId).children("ul").children("li.parent").eq(0).children("a").css("color","red");
    $("#"+rootId).children("ul").children("li.parent").eq(0).siblings("li").children("a").css("color","#484747");
    $("#"+rootId).children("ul").children("li.parent").eq(0).children("ul").children("li.son").children("a").css("color","#484747");
    }else{
    //判断 是否有4级菜单
    if($("#"+rootId+" ul li.parent").eq(parentNum).children("ul").children("li.son").eq(0).children("ul").children("li.subSon").length<=0){
    window.parent.invokeClick($("#"+rootId+" ul li.parent").eq(parentNum).children("ul").children("li.son").eq(0).children("a"));
    }else{
    $("#"+rootId+" ul li.parent").eq(parentNum).children("ul").children("li.son").eq(0).children("ul").children("li.subSon").css("display","block");
    window.parent.invokeClick($("#"+rootId+" ul li.parent").eq(parentNum).children("ul").children("li.son").eq(0).children("ul").children("li.subSon").eq(0).children("a"));
    }
    }
    //调整li.root的高度，原先设置的height：auto;搜狗等不支持。
    $("#"+rootId).css("height",(parentSize+sonSize+1)*32);
    $("#"+rootId+" ul").children("li.parent").eq(0).css("height",(sonSize+1)*32);
    //然后将上一次点击的li.root还原
    $("#"+selectedRootId).css("height",32);
    $("#"+selectedRootId+" ul").children("li.parent").eq(selectedParentNum).css("height",32).children("ul").children("li.son").eq(selectedSonNum).css("height",32);

    selectedSonNum=-1;
    selectedParentNum=0;
    selectedRootNum=rootNum;
    }
    }
      

  3.   

    //父板块之间的单击事件
    function changeParent(rootId,parentNum,indexHref){
    var parentId=$("#"+rootId+" ul").children("li.parent").eq(parentNum).attr("id");
    var selectedParentId = $(".index_left ul").children("li.root").eq(selectedRootNum).children("ul").children("li.parent").eq(selectedParentNum).attr("id");
    var parentSize = $("#"+rootId+" ul").children("li.parent").length;   
    var sonSize = $("#"+parentId+" ul").children("li.son").length;
    var subSonSize = $("#"+parentId+" ul").children("li.son").eq(0).children("ul").children("li.subSon").length;
    if(selectedParentNum==parentNum){
    $("#"+parentId+" ul li.son").css("display","none").children("ul").children("li.subSon").css("display","none");
    //将上一次点击的li.parent还原
    $("#"+rootId).css("height",(parentSize+1)*32);
    $("#"+selectedParentId).css("height",32);
    $("#"+selectedParentId+" ul").children("li.son").eq(selectedSonNum).css("height",32);

    selectedParentNum=-1;
    }else{
    $("#"+parentId+" ul li.son").show();//.css("display","block");
    $("#"+rootId+" ul").children("li.parent").eq(selectedParentNum).children("ul").children("li.son").css("display","none").children("ul").children("li.subSon").css("display","none");
    //判断 是否有4级菜单
    if($("#"+parentId+" ul li.son").eq(0).children("ul").children("li.subSon").length<=0){
    window.parent.invokeClick($("#"+parentId+" ul li.son").eq(0).children("a"));
    }else{
    $("#"+parentId+" ul li.son").eq(0).children("ul").children("li.subSon").css("display","block");
    window.parent.invokeClick($("#"+parentId+" ul li.son").eq(0).children("ul").children("li.subSon").eq(0).children("a"));
    }
    //查询是否超链接
    if(indexHref!="${ctx}"){
    window.parent.mainForward(indexHref,null);
    $("#"+rootId).children("ul").children("li.parent").eq(0).children("ul").children("li.son").children("a").css("color","#484747");
    }
    if($("#"+parentId+" ul li.son").length<=0){
    $("#"+parentId).children("a").css("color","red").parent("li").siblings("li").children("a").css("color","#484747");
    }
    //调整li.parent的高度，原先设置的height：auto;搜狗等不支持。
    $("#"+rootId).css("height",(parentSize+sonSize+subSonSize+1)*32);
    $("#"+parentId).css("height",(sonSize+subSonSize+1)*32);
    $("#"+parentId+" ul").children("li.son").eq(0).css("height",(subSonSize+1)*32);
    //然后将上一次点击的li.parent还原
    $("#"+selectedParentId).css("height",32);
    $("#"+selectedParentId+" ul").children("li.son").eq(selectedSonNum).css("height",32);

    selectedSonNum=0;
    selectedParentNum=parentNum;
    }
    } //子板块之间的单击事件
    function changeSon(parentId,sonNum){
    var sonId=$("#"+parentId+" ul").children("li.son").eq(sonNum).attr("id");
    var selectedRootId = $(".index_left ul").children("li.root").eq(selectedRootNum).attr("id");
    var selectedParentId = $("#"+selectedRootId).children("ul").children("li.parent").eq(selectedParentNum).attr("id");
    var selectedSonId = $("#"+selectedRootId).children("ul").children("li.parent").eq(selectedParentNum).children("ul").children("li.son").eq(selectedSonNum).attr("id");
    var parentSize = $("#"+selectedRootId).children("ul").children("li.parent").length;
    var sonSize = $("#"+parentId+" ul").children("li.son").length;
    var subSonSize = $("#"+parentId+" ul").children("li.son").eq(sonNum).children("ul").children("li.subSon").length;
    if(selectedSonNum==sonNum){
    $("#"+sonId+" ul li.subSon").css("display","none");
    //将上一次点击的li.son还原
    $("#"+selectedRootId).css("height",(parentSize+sonSize+1)*32);
    $("#"+selectedParentId).css("height",(sonSize+1)*32);
    $("#"+selectedSonId).css("height",32);
    $("#"+selectedSonId+" ul").children("li.subSon").eq(selectedSonNum).css("height",32);

    selectedSonNum=-1;
    }else{
    $("#"+parentId+" ul li.son").eq(selectedSonNum).children("ul").children("li.subSon").css("display","none");
    $("#"+sonId+" ul li.subSon").show();//.css("display","block");
    window.parent.invokeClick($("#"+sonId+" ul li.subSon").eq(0).children("a"));//.trigger("click");
    //调整li.son的高度，原先设置的height：auto;搜狗等不支持。
    $("#"+parentId).css("height",(sonSize+subSonSize+1)*32);
    $("#"+sonId).css("height",(subSonSize+1)*32);
    //$("#"+sonId+" ul").children("li.son").eq(0).css("height",(subSonSize+1)*32);
    //然后将上一次点击的li.son还原
    $("#"+selectedRootId).css("height",(parentSize+sonSize+subSonSize+1)*32);
    $("#"+selectedParentId).css("height",(sonSize+subSonSize+1)*32);
    $("#"+selectedSonId).css("height",32);
    $("#"+selectedSonId+" ul").children("li.subSon").eq(selectedSonNum).css("height",32);

    selectedSonNum=sonNum;
    }
    }
    //没有子版块的子板块之间的单击事件
    function changeSon1(parentId,sonNum){
    $("#"+parentId+" ul li.son").eq(selectedSonNum).children("ul").children("li.subSon").css("display","none");

    var selectedRootId = $(".index_left ul").children("li.root").eq(selectedRootNum).attr("id");
    var selectedParentId = $("#"+selectedRootId).children("ul").children("li.parent").eq(selectedParentNum).attr("id");
    var selectedSonId = $("#"+selectedRootId).children("ul").children("li.parent").eq(selectedParentNum).children("ul").children("li.son").eq(selectedSonNum).attr("id");
    var parentSize = $("#"+selectedRootId).children("ul").children("li.parent").length;
    var sonSize = $("#"+parentId+" ul").children("li.son").length;
    var subSonSize = $("#"+parentId+" ul").children("li.son").eq(sonNum).children("ul").children("li.subSon").length;
    $("#"+selectedRootId).css("height",(parentSize+sonSize+subSonSize+1)*32);
    $("#"+selectedParentId).css("height",(sonSize+subSonSize+1)*32);
    $("#"+selectedSonId).css("height",32);
    $("#"+selectedSonId+" ul").children("li.subSon").eq(selectedSonNum).css("height",32);

    selectedSonNum=sonNum;
    }

    //让该页面高度占满整个iframe
    function resizeLeft(){
    $(".index_left").css("height",document.documentElement.clientHeight);
    }

    //点击a 之后改变字体颜色
    function changeLinkColor(linkObjId){
    $("#"+linkObjId).css("color","red");
    $("#"+linkObjId).parent("li").siblings("li").children("a").css("color","#484747");
    $("#"+linkObjId).parent("li").parent("ul").parent("li").parent("ul").children("li").children("a").css("color","#484747");
    //判断当前是否是四级菜单
    if($("#"+linkObjId).parent("li").parent("ul").parent("li").parent("ul").parent("li").attr("class")=="parent"){
    $("#"+linkObjId).parent("li").parent("ul").parent("li").parent("ul").parent("li").parent("ul").children("li").children("a").css("color","#484747");
    }
    }
    </script>
    </head>
    <body>
    <div class="index_left">
      <ul>
       <s:iterator value="#request.menus" id="root" status="rst">
    <li id="${code}" class="root" onclick="changeRoot(${rst.index},0,'${ctx}${url}')" title="${name}">
    <s:set name="rcode" value="#root.code"></s:set>
    <a href="#" onmousedown="a_mousedown('${code}')" onmouseover="a_mouseover('${code}')" onmouseout="a_mouseout('${code}')">
    <s:if test="#rst.index==0"><img src="${ctx}/system/images/images/ico_l.jpg" width="16" height="16" class="r_float" style="margin-right:10px; margin-top:7px;" title="折叠"/></s:if>${name}
    </a>
    <ul>
       <s:iterator value="getChildren()" id="parent" status="pst">
       <s:set name="pcode" value="code"></s:set>
       <li id="${code}" class="parent"  onclick="changeParent('<s:property value='#rcode'/>',${pst.index},'${ctx}${url}')" title="${name}" >
       <a href="#">${name}</a>
       <ul>
         <s:iterator value="getChildren()" status="sst">
      <s:if test="getChildren()!=null && getChildren().size()!=0">
    <li id="${code}" class="son" title="${name}" onclick="changeSon('${pcode}',${sst.index})" >
        <a href="#" id="${code}_${name}" >${name}</a>
      <ul>
      <s:iterator value="getChildren()" status="cst">
      <li class="subSon"><a href="#" id="${code}_${name}" onclick="window.parent.mainForward('${ctx}${url}',this)" >${name}</a></li>
      </s:iterator>
      </ul>
      </li>
      </s:if>
      <s:else>
      <li id="${code}" class="son" title="${name}" onclick="changeSon1('${pcode}',${sst.index})">
      <a href="#" id="${code}_${name}" onclick="window.parent.mainForward('${ctx}${url}',this)" >${name}</a>
      </li>
      </s:else>
     </s:iterator>
       </ul>
       </li>
       </s:iterator>
    </ul>
    </li>
    </s:iterator>
      </ul>
    </div>
    </body>
    </html>
      

  4.   

    大方一点，给你个链接吧，上面各种有
    http://www.111cn.net/list-76/