我的问题：GIF（忽略语言）。
DIV正在消失在其他盒子后面。我希望他们像最后一个盒子一样消失。你可以看到＆＃39; item_7＆＃39;框已关闭，其他框如何。
我一直试图找到问题几个小时，但我找不到它，所以我想也许有人可以帮我解决。
整个代码在这里：
<%@ page contentType="text/html; charset=utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="com.sun.xml.internal.txw2.Document"%>
<%@page import="com.sun.org.apache.bcel.internal.generic.BREAKPOINT"%>
<% request.setCharacterEncoding("UTF-8"); %>
<html dir="rtl">
<%@page import="JdbcDbDan.ForDataBase"%>
<jsp:useBean id="db" class = "JdbcDbDan.ForDataBase"/><!-- equals to "classes.ForDataBase db=new classes.ForDataBase()" -->
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>Itai's Site</title>
<link rel="shortcut icon" href="http://www.iconarchive.com/download/i85581/graphicloads/100-flat/home.ico">
<link rel="stylesheet" type="text/css" href="popup.css">
<style>
.main {
height: 50px;
background-color:#E0E0E0;
transition:all 0.8s ease-out;
margin-bottom:5px;
cursor:pointer;
width: 40%;
z-index: inherit;
}
.main:hover {
background-color:#FFFFCC;
}
.next {
height:0px;
background-color:red;
transition:all 0.5s ease-out;
}
.main2 {
min-height:50px;
background-color:#E0E0E0;
transition:all 0.8s ease-out;
margin-bottom:5px;
width: 40%;
padding-top:10px;
}
.main2 .next {
height:250px;
transition:all 1s ease-out;
}
.fade {
opacity: 0;
transition-delay: 0s;
}
.main2 .fade {
opacity:1;
transition:all 0.8s ease-out;
transition-delay: 0.9s;
}
</style>
<script>
function toggleClass(el) {
if (el.className == "main") {
el.className = "main2";
} else {
el.className = "main";
}
}
</script>
</head>
<body>
<%
//the code below until '*****' is just translating to hebrew for the user.
String [][] array=null;
String sort="select * from items order by idNum DESC; ";
System.out.println("FROM sort "+sort);
array=db.select(sort);
for(int i=0;i<array.length;i++){
System.out.println("FROM sort "+sort);
array=db.select(sort);
if(array[i][5].equals("home"))
array[i][5]="מוצרים ביתיים";
else
if(array[i][5].equals("electricity"))
array[i][5]="מוצרי חשמל";
else
if(array[i][5].equals("garden"))
array[i][5]="כלי גינה";
else
if(array[i][5].equals("electronic"))
array[i][5]="מוצרי אלקטרוניקה";
else
if(array[i][3].equals("haifa"))
array[i][3]="חיפה והסביבה";
else
if(array[i][3].equals("galilelion"))
array[i][3]="גליל עליון";
if(array[i][3].equals("kineret"))
array[i][3]="הכנרת והסביבה";
else
if(array[i][3].equals("afula"))
array[i][3]="עפולה והעמקים";
else
if(array[i][3].equals("galiltahton"))
array[i][3]="גליל תחתון";
else
if(array[i][3].equals("golan"))
array[i][3]="רמת הגולן";
else
if(array[i][3].equals("yokneam"))
array[i][3]="יקנעם,טבעון והסביבה";
else
if(array[i][3].equals("betshean"))
array[i][3]="עמק בית שאן";
else
if(array[i][3].equals("hamerkaz"))
array[i][3]="איזור המרכז";
else
if(array[i][3].equals("jerusalem"))
array[i][3]="ירושלים והסביבה";
else
if(array[i][3].equals("yeahoda"))
array[i][3]="ישובי יהודה";
else
if(array[i][3].equals("shomron"))
array[i][3]="ישובי שומרון";
else
if(array[i][3].equals("deadsea"))
array[i][3]="בקעת הירדן וים המלח";
else
if(array[i][3].equals("shfela"))
array[i][3]="שפלה";
else
if(array[i][3].equals("beersheva"))
array[i][3]="באר שבע והסביבה";
else
if(array[i][3].equals("eilat"))
array[i][3]="אילת וערבה";
else
if(array[i][i].equals("negev"))
array[i][3]="ישובי הנגב";
*****
out.print("");
out.print(" <div class='main' onclick='toggleClass(this)'> <br /><center>item_"+i+"</center> ");
out.print("<div class='next' ><center><font color='black' class='fade' style='text-decoration:none;font:22px arial, verdana, sans-serif';><u>posted by :</u>"+array[i][1]+"</br><u>caregory :</u>"+array[i][5]+"</br><u>subcategory :</u>"+array[i][6]+"</br><u>description :</u>"+array[i][2]+"</br><u>notes :</u>"+array[i][7]+"</br><u>condition:</u>"+array[i][8]+"</br> <u>selling area :</u>"+array[i][3]+"</br><u>Phone :</u>"+array[i][9]+" </font> </center></div> </div> ");
}
%>
</body>
</html>