请帮我这个卷起/放下侧栏菜单。
我制作了一个视频片段来演示。
http://www.youtube.com/watch?v=Eegqh1w3eJQ
这是html代码：
<!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>Mode 1</title>
<link href="Style_sheet.css" rel="stylesheet" type="text/css" />
<script src="Display text.js" type="text/javascript"></script>
</head>
<body>
<div class="Body">
<div class="header">
<h1 id="head">Manage Components</h1>
<h3 id="select-system">Select System</h3>
</div>
<div class="side-nav">
<a href="#" onclick="show('n1')" id="english">57.102 Introductory Spanish</a><br />
<div id="n1" style="display:none">
<a href="#" onclick="show('n2')" id="green">Section 1:Introduction to Spanish Culture</a><br />
<div id="n2" style="display:none">
<a href="#" id="dark_red">Topic 1:Getting started</a><br />
<a href="#" id="dark_red">Topic 2:Introduction to Grammar</a><br /><br /><br />
</div>
<a href="#" onclick="show('n3')" id="green">Section 2:Getting started with reading and writing</a><br />
<div id="n3" style="display:none">
<a href="#" onclick="show('nn3')" id="dark_red">Topic 1:Reading Spanish</a><br />
<div id="nn3" style="display:none">
<a href="mode 1.html" onclick="show('nn4')" id="light_blue">Mode 1:Spanish Components</a>
<div id="nn4" style="display:none">
<a href="reading_spanish.html" id="red">Spanish Reading</a>
</div>
</div><br />
<a href="#" id="dark_red">Topic 2:Writing in Spanish</a><br />
</div>
</div><br />
<a href="#" onclick="show('m1')" id="english">Topic SuperMode</a><br />
<div id="m1" style="display:none">
<a href="#" id="green">Study Guide</a><br />
<a href="#" onclick="show('m2')" id="green">Key Words</a><br />
<div id="m2" style="display:none">
<a href="#" id="dark_red">Pragmatics</a><br />
<a href="#" id="dark_red">Manana</a><br />
<a href="#" id="dark_red">Tiempo</a><br />
<a href="#" id="dark_red">Cara</a><br />
<a href="#" id="dark_red">Triste</a><br />
</div>
<a href="#" id="green">Learning Support</a><br />
<a href="#" id="green">Help</a><br />
<a href="#" id="green">Chat</a><br />
<a href="#" id="green">Email</a><br />
<a href="#" id="green">Notes</a><br />
</div><br />
<a href="#" onclick="show('p1')" id="english">Pre-defined modes</a><br />
<div id="p1" style="display:none">
<a href="#" id="green">Culture aspects</a><br />
<a href="#" id="green">Reading practice</a><br />
<a href="#" id="green">Writing practice</a><br />
<a href="#" id="green">Listening and speaking</a><br />
</div>
</div>
<div id="slection">
57.102 Introductory Spanish > Section 1 > Topic 1 > Mode 1
</div>
<div id="content">
<p id="list-component">List of Available Components </p>
<!--<div id="check-box">
<input type="checkbox" value="checkbox1" />
<label id="label">Reading</label>
<label id="label2">15-10-2010</label>
<label id="label">10:52</label>
<label id="label2">Kemp</label><br />
<input type="checkbox" value="checkbox2" />
<label id="label">Listening</label>
<label id="label2">14-10-2010</label>
<label id="label">8:02</label>
<label id="label2">Kemp</label><br />
<input type="checkbox" value="checkbox3" />
<label id="label">Writing</label>
<label id="label2">10-10-2010</label>
<label id="label">7:35</label>
<label id="label2">Kemp</label><br />
<input type="checkbox" value="checkbox4" />
<label id="label">Grammar</label>
<label id="label2">01-10-2010</label>
<label id="label">4:20</label>
<label id="label2">Kemp</label><br />
</div>-->
<table id="tabl">
<tr>
<td><input type="checkbox" value="checkbox1" /></td>
<td>Reading</td>
<td>15-10-2010</td>
<td>10:52</td>
<td>Kemp</td>
</tr>
<tr>
<td><input type="checkbox" value="checkbox2" /></td>
<td>Listening</td>
<td>14-10-2010</td>
<td>08:02</td>
<td>Kemp</td>
</tr>
<tr>
<td><input type="checkbox" value="checkbox3" /></td>
<td>Writing</td>
<td>10-10-2010</td>
<td>07:35</td>
<td>Kemp</td>
</tr>
<tr>
<td><input type="checkbox" value="checkbox4" /></td>
<td>Grammar</td>
<td>01-10-2010</td>
<td>04:20</td>
<td>Kemp</td>
</tr>
</table><br />
<input type="button" name="edit_button" id="save_but" value="Edit" />
<input type="button" name="delete_button" id="cancel_but" value="Delete" />
<input type="button" name="Student Preview" id="cancel_but" value="preview" onclick="window.location.href='student_preview.html'" />
<input type="button" name="back" id="preview-but" value="Back" />
</div>
</div>
</body>
</html>
这是javascript
function show(id)
{
object=document.getElementById(id);
if(object.style.display=="none")
{
object.style.display="";
}
else
{
object.style.display="none";
}
}
这是CSS
@charset "utf-8";
/* CSS Document */
html,body{
padding:0;
margin:0;
background-color:#E8E8E8;
}
.Body{
background-color:#FFF;
width:1050px;
height:900px;
margin:auto;
padding:0;
position:relative;
}
.header{
background-color:#FFF;
width:1048px;
height:140px;
float:right;
border:1px #F00 dotted;
position:relative;
}
.header #head{
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:46px;
}
.header #select-system{
position:absolute;
left:20px;
bottom:-18px;
font-family:Verdana, Geneva, sans-serif;
text-decoration:underline;
}
.side-nav{
background-color:#FFF;
width:250px;
height:757px;
position:absolute;
left:auto;
bottom:0px;
border:1px dotted #F00;
}
.side-nav #english{
text-decoration:none;
font-size:18px;
font-weight:bold;
padding:5px;
color:#06F;
}
.side-nav #blue{
color:#03F;
text-decoration:none;
font-weight:bold;
font-size:14px;
}
.side-nav #green{
color:#6F0;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:15px;
}
.side-nav #dark_red{
color:#900;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:30px;
}
.side-nav #light_blue{
color:#0CF;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:45px;
}
.side-nav #red{
color:#F00;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding-left:60px;
}
.Body #content{
position:absolute;
left:260px;
top:180px;
width:780px;
height:700px;
border:1px solid #F00;
}
.Body #content1{
position:absolute;
left:260px;
top:150px;
width:780px;
height:740px;
border:1px solid #F00;
}
.Body #txt{
margin-left:20px;
}
.Body #slection{
position:absolute;
left:260px;
top:150px;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#F00;
font-weight:bold;
}
.Body #boxes{
border:2px solid #000;
margin-left:10px;
margin-top:10px;
height:25px;
}
.Body #text{
font-weight:bold;
font-size:20px;
margin-left:20px;
margin-top:10px;
}
.Body #cont_box{
width:730px;
height:180px;
border:2px solid #000;
margin-left:20px;
font-size:20px;
color:#00F;
padding:5px;
}
.Body #cont_box1{
width:730px;
height:280px;
border:2px solid #F60;
margin-left:13px;
font-size:20px;
color:#06F;
padding:10px;
}
.Body #cont_box2{
width:645px;
height:350px;
border:2px solid #F60;
margin-left:60px;
font-size:20px;
color:#06F;
}
.Body #browse_box{
border:2px solid #000;
margin-left:150px;
margin-bottom:10px;
height:25px;
width:400px;
}
.Body #button{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:10px;
}
.Body #button:hover{
background-color:#09F;
}
.Body #button_more{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:567px;
}
.Body #save_but{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:150px;
}
.Body #cancel_but{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:20px;
}
.Body #preview-but{
width:65px;
height:30px;
font-weight:700;
color:#03F;
margin-left:100px;
}
.Body #preview-but:hover{
color:#009;
}
.Body #checkbox{
margin-left:150px;
height:20px;
}
.Body #dropdownbox{
width:180px;
height:30px;
position:absolute;
left:280px;
top:10px;
}
.Body #b1{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:#F00;
}
.Body #icons{
width:130px;
height:140px;
margin-right:10px;
margin-left:60px;
margin-top:50px;
float:left;
}
.Body #text_icons{
width:190px;
height:15px;
float:left;
font-size:14px;
text-decoration:none;
color:#06F;
margin-left:20px;
margin-right:5px;
}
.Body #extra-materials{
font-size:18px;
text-decoration:none;
margin-left:60px;
color:#06F;
}
.Body #extra-materials:hover{
text-decoration:underline;
}
.Body #list-component{
margin-left:40px;
font-size:18px;
font-weight:bold;
}
.Body #check-box{
margin-left:150px;
}
.Body #label{
margin-left:30px;
}
.Body #label2{
margin-left:80px;
}
.Body #tabl{
border:hidden;
width:500px;
height:10px;
margin-left:150px;
margin-top:50px;
}
请帮助!!!
提前致谢！
答案 0 :(得分：2)
在我看来，您的问题在于您的“西班牙语组件”链接会将您发送到另一个.html页面。加载新页面时，页面左侧的菜单也会重新加载到其原始状态（所有内容都隐藏，或者如您所说“卷起”）。所以，我能看到的两个解决方案是：
（1）不要让网页重新加载。
（2）保存菜单的状态，并将该状态发送到新页面（模式1.html），因此当加载新页面时，您可以适当地加载菜单。 / p>
为了实现第一个解决方案，我将使用AJAX从模式1.html动态获取数据并在页面上显示它而不重新加载页面。如果您不熟悉AJAX，w3schools.com有一个非常好的教程here。
要实现第二个解决方案，您需要一种方法来保存状态，然后将其发送到下一页。这可能需要一些服务器端脚本，即使这样也可能不如第一个解决方案那么好，所以我建议坚持使用AJAX解决方案。