二级菜单的拉伸合并，及菜单的上移

everlxq

浏览: 108655 次
性别:
来自: 青岛

最近访客更多访客>>

lilybao

kalin001

haodyy

Jessie丶J

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" isELIgnored="false"%>
<%@page import="vo.Location" %>
<%@taglib prefix="s" uri="/struts-tags"  %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>菜单树</title>
  <SCRIPT type="text/javascript" src="js/jquery.js"></SCRIPT>
<link href="js/leftmenu.css" rel="stylesheet" type="text/css" />
  <SCRIPT type="text/javascript">
    $(function(){

  })
  function getEl(id){
  var firstli = $("#_menu2 li:first");
  var cruli=$("#a"+id).parent().parent();
  var next = cruli.next(),
                    parent = cruli.parent();
                firstli.after(cruli);
                if(next.length === 0){
                    parent.append(firstli);
                }else{
                    next.before(firstli);
                }
                
                var dropdown=$("#a"+id).next();
                $(".adropdown").not(dropdown).slideUp('slow');
                dropdown.slideToggle('slow');
                
  }
  
  </SCRIPT>

  </head>
  <body>
  <table>
  <tr><td style="width: 300px;height: 720px;overflow-y:scroll;vertical-align: top;">
  <h5>菜单树</h5>
  <ul id="_menu2">
						<%
							List<Location> list = (List<Location>) request
									.getAttribute("locations");
							Location temp = null;
							Location temp1 = null;
							for (int i = 0; i < list.size(); i++) {
								Location l = list.get(i);
								Location p = l.getParent();
								if (p != null && !(p.equals(temp))) {
									if (i > 0) {
						%>
					</ul>
					</li>
					</ul>
					</li>
					<%
						}
					%>
					<li style="list-style: none;">
						<ul>
							<li id="a<%=p.getId()%>"
								style="list-style: none; background-color: #abc; width: 200px; height: 20px; border: 1px solid #edd;"
								onclick="getEl(<%=p.getId()%>)">
								<%
									if (null != p) {
								%>
								<%=p.getName()%>
								<%
									}
								%>
							</li>
							<li style="list-style: none; display: none;" class="adropdown">
								<ul>
									<%
										}
									%>
									<li
										style="list-style: none; background-color: #bbb; width: 200px; height: 20px; border: 1px solid #ded;">
										<%=l.getName()%>
									</li>
									<%
										if (i == list.size() - 1) {
									%>
								</ul>
							</li>
						</ul>
					</li>
					<%
						}
					%>
					<%
						temp = p;
							temp1 = l;
						}
					%>
					</ul>
  </td>
 </tr>
  </table>
  </body>
</html>

基本结构

<ul>

for（

<li><ul>

<li>一级菜单

<li><ul>

<li>二级菜单


重要的地方

 <% if (i > 0) { %>
	</ul>
	</li>
	</ul>
	</li>
	<%}%>

<% if (i == list.size() - 1) {  %>
	</ul>
	</li>
	</ul>
	</li>
		<%
		}
		%>

遍历的时候标签的闭合

点击菜单事件的方法

function getEl(id){
  var firstli = $("#_menu2 li:first");
  var cruli=$("#a"+id).parent().parent();
  var next = cruli.next(),parent = cruli.parent();
                firstli.after(cruli);
                if(next.length === 0){
                    parent.append(firstli);
                }else{
                    next.before(firstli);
                }
                var dropdown=$("#a"+id).next();
                $(".adropdown").not(dropdown).slideUp('slow');
                dropdown.slideToggle('slow');
  }

都是知识点

分享到：