我正在尝试创建一个学生列表,这些学生在点击学生姓名时可以展开。我在我的家用电脑上创建了这个项目,它有IE8,当我今天早上带它去测试它失败了。我的工作计算机使用的是IE7,而我猜测的是我的JQuery中使用的CSS是什么。
问题是我希望所有div都隐藏()开始时以及当用户点击div时它会扩展以显示学生的测试分数。那么正在发生的事情只是第一个div hides(),而第一个div是唯一一个在点击时会展开和折叠的div。其余的根本没有运作,它们显示出扩展。希望我已经足够好地解释了我的问题:)
注意:就像大多数人一样,我正在努力学习编码的最佳实践,请告诉我什么是不对的,或者我如何改进我编码的内容。
的style.css
#wrapper
{
width:100%;
}
#main-container
{
width: 800px;
margin-left:auto;
margin-right:auto;
font-family: Verdana;
font-size: 12px;
}
#header
{
border: 1px solid #999;
border-bottom: none;
background-color: #ccc;
font-weight: bold;
}
#header ul
{
display: inline;
}
#header ul li
{
float: left;
padding-left: 10px;
list-style: none;
display: inline;
width: 200px;
}
#footer
{
margin-left: auto;
margin-right: auto;
width: 800px;
font-size: 9px;
}
#footer a
{
float: right;
text-decoration: none;
color: #666;
font-size: 9px;
}
#footer a:hover
{
text-decoration: underline;
color: blue;
}
.student
{
border: 1px solid #999;
border-bottom: none;
cursor: default;
}
.student:hover
{
background-color: #f6f6f6;
}
.student ul
{
display: inline;
}
.student ul li
{
float: left;
padding-left: 10px;
list-style: none;
display: inline;
width: 200px;
}
.student-scores
{
height: 206px;
}
.student-scores ul
{
display: inline;
}
.student-scores ul li
{
padding-left: 100px;
width: 699px;
list-style: none;
display: inline;
border-top: 1px dotted #999;
}
.student-scores ul li:hover
{
background-color: #FFCC66;
}
.lesson
{
font-size: 12px;
}
.date
{
font-size: 10px;
margin-left: 50px;
}
.score
{
font-size: 10px;
margin-left: 50px;
}
的jquery.js
$(document).ready(function()
{
$('.students div:last-child').css("border-bottom","1px solid #999");
$('div.student-scores').css("border-bottom","none");
$('div.student-scores').hide();
$('div.student').click(function()
{
$(this).find('.student-scores').slideToggle();
});
});
的index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JSON Testing</title>
<script type="text/javascript" src="library/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="library/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="library/style.css" />
</head>
<body>
<div id="wrapper">
<div id="main-container">
<div id="header">
<ul>
<li>Employee ID</li>
<li>Last Name</li>
<li>First Name</li>
</ul>
</div>
<div id="students">
<div class="student">
<ul>
<li class="id">0425655</li>
<li class="lname">Doe</li>
<li class="fname">John</li>
</ul>
<div class="student-scores">
<ul>
<li><span class="lesson">Lesson <strong>01</strong></span><span class="date">Submission Date: <strong>Not completed</strong></span></li>
<li><span class="lesson">Lesson <strong>02</strong></span><span class="date">Submission Date: <strong>04/26/2011</strong></span><span class="score">Score: <strong>98</strong></span></li>
<li><span class="lesson">Lesson <strong>03</strong></span><span class="date">Submission Date: <strong>04/27/2011</strong></span><span class="score">Score: <strong>78</strong></span></li>
<li><span class="lesson">Lesson <strong>04</strong></span><span class="date">Submission Date: <strong>04/28/2011</strong></span><span class="score">Score: <strong>62</strong></span></li>
<li><span class="lesson">Lesson <strong>05</strong></span><span class="date">Submission Date: <strong>04/29/2011</strong></span><span class="score">Score: <strong>100</strong></span></li>
<li><span class="lesson">Lesson <strong>06</strong></span><span class="date">Submission Date: <strong>Not completed</strong></span></li>
<li><span class="lesson">Lesson <strong>07</strong></span><span class="date">Submission Date: <strong>04/31/2011</strong></span><span class="score">Score: <strong>73</strong></span></li>
<li><span class="lesson">Lesson <strong>08</strong></span><span class="date">Submission Date: <strong>04/32/2011</strong></span><span class="score">Score: <strong>88</strong></span></li>
<li><span class="lesson">Lesson <strong>09</strong></span><span class="date">Submission Date: <strong>04/33/2011</strong></span><span class="score">Score: <strong>81</strong></span></li>
<li><span class="lesson">Lesson <strong>10</strong></span><span class="date">Submission Date: <strong>04/34/2011</strong></span><span class="score">Score: <strong>60</strong></span></li>
<li><span class="lesson">Lesson <strong>11</strong></span><span class="date">Submission Date: <strong>04/35/2011</strong></span><span class="score">Score: <strong>76</strong></span></li>
<li>need to add <strong>[average][not completed counter][percentage complete counter]</strong></li>
</ul>
</div>
</div>
<div class="student">
<ul>
<li class="id">442326</li>
<li class="lname">Smith</li>
<li class="fname">Jane</li>
</ul>
<div class="student-scores">
<ul>
<li><span class="lesson">Lesson <strong>01</strong></span><span class="date">Submission Date: <strong>02/25/2011</strong></span><span class="score">Score: <strong>1</strong></span></li>
<li><span class="lesson">Lesson <strong>02</strong></span><span class="date">Submission Date: <strong>04/26/2011</strong></span><span class="score">Score: <strong>2</strong></span></li>
<li><span class="lesson">Lesson <strong>03</strong></span><span class="date">Submission Date: <strong>04/27/2011</strong></span><span class="score">Score: <strong>3</strong></span></li>
<li><span class="lesson">Lesson <strong>04</strong></span><span class="date">Submission Date: <strong>04/28/2011</strong></span><span class="score">Score: <strong>4</strong></span></li>
<li><span class="lesson">Lesson <strong>05</strong></span><span class="date">Submission Date: <strong>04/29/2011</strong></span><span class="score">Score: <strong>5</strong></span></li>
<li><span class="lesson">Lesson <strong>06</strong></span><span class="date">Submission Date: <strong>04/30/2011</strong></span><span class="score">Score: <strong>6</strong></span></li>
<li><span class="lesson">Lesson <strong>07</strong></span><span class="date">Submission Date: <strong>04/31/2011</strong></span><span class="score">Score: <strong>7</strong></span></li>
<li><span class="lesson">Lesson <strong>08</strong></span><span class="date">Submission Date: <strong>04/32/2011</strong></span><span class="score">Score: <strong>8</strong></span></li>
<li><span class="lesson">Lesson <strong>09</strong></span><span class="date">Submission Date: <strong>04/33/2011</strong></span><span class="score">Score: <strong>9</strong></span></li>
<li><span class="lesson">Lesson <strong>10</strong></span><span class="date">Submission Date: <strong>04/34/2011</strong></span><span class="score">Score: <strong>10</strong></span></li>
<li><span class="lesson">Lesson <strong>11</strong></span><span class="date">Submission Date: <strong>04/35/2011</strong></span><span class="score">Score: <strong>11</strong></span></li>
<li>need to add <strong>[average][not completed counter][percentage complete counter]</strong></li>
</ul>
</div>
</div>
<div class="student">
<ul>
<li class="id">456356</li>
<li class="lname">Jones</li>
<li class="fname">Mike</li>
</ul>
<div class="student-scores">
<ul>
<li><span class="lesson">Lesson <strong>01</strong></span><span class="date">Submission Date: <strong>03/25/2011</strong></span><span class="score">Score: <strong>1</strong></span></li>
<li><span class="lesson">Lesson <strong>02</strong></span><span class="date">Submission Date: <strong>04/26/2011</strong></span><span class="score">Score: <strong>2</strong></span></li>
<li><span class="lesson">Lesson <strong>03</strong></span><span class="date">Submission Date: <strong>04/27/2011</strong></span><span class="score">Score: <strong>3</strong></span></li>
<li><span class="lesson">Lesson <strong>04</strong></span><span class="date">Submission Date: <strong>04/28/2011</strong></span><span class="score">Score: <strong>4</strong></span></li>
<li><span class="lesson">Lesson <strong>05</strong></span><span class="date">Submission Date: <strong>04/29/2011</strong></span><span class="score">Score: <strong>5</strong></span></li>
<li><span class="lesson">Lesson <strong>06</strong></span><span class="date">Submission Date: <strong>04/30/2011</strong></span><span class="score">Score: <strong>6</strong></span></li>
<li><span class="lesson">Lesson <strong>07</strong></span><span class="date">Submission Date: <strong>04/31/2011</strong></span><span class="score">Score: <strong>7</strong></span></li>
<li><span class="lesson">Lesson <strong>08</strong></span><span class="date">Submission Date: <strong>04/32/2011</strong></span><span class="score">Score: <strong>8</strong></span></li>
<li><span class="lesson">Lesson <strong>09</strong></span><span class="date">Submission Date: <strong>04/33/2011</strong></span><span class="score">Score: <strong>9</strong></span></li>
<li><span class="lesson">Lesson <strong>10</strong></span><span class="date">Submission Date: <strong>04/34/2011</strong></span><span class="score">Score: <strong>10</strong></span></li>
<li><span class="lesson">Lesson <strong>11</strong></span><span class="date">Submission Date: <strong>04/35/2011</strong></span><span class="score">Score: <strong>11</strong></span></li>
<li>need to add <strong>[average][not completed counter][percentage complete counter]</strong></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">Signal Electrical Fundamentals Tracker System<a href="upload.php" title="Login required">UPLOADER</a></div>
</div>
</body>
</html>