JavaScript中的Roll up/down

Question

JavaScript中的Roll up/down

javascript

3

请帮我处理这个上下滚动的侧边栏菜单。

我制作了一个视频演示。

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;
}

请帮忙！！！

提前感谢！

- James1

是的。但是加一分，因为视频说明了问题。 - Pekka

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- smfoote · Accepted Answer

我认为您的问题在于，“Spanish Component”链接将您发送到另一个.html页面。当新页面加载时，页面左侧的菜单也会重新加载到其原始状态（即所有内容都隐藏或“卷起来”）。因此，我能看到的两个解决方案是：

（1）不要让页面重新加载。

（2）保存菜单的状态，并将该状态发送到新页面（mode 1.html），这样当新页面加载时，您可以适当地加载菜单。

要实现第一种解决方案，我会使用AJAX动态获取来自mode 1.html的数据，并在不重新加载页面的情况下在页面上显示它。如果您对AJAX不熟悉，w3schools.com有一个相当不错的教程here。

要实现第二种解决方案，您需要一种保存状态的方法，然后将其发送到下一页。这可能需要一些服务器端脚本，即使如此，它也可能不像第一种解决方案那样有效，因此我建议坚持使用AJAX解决方案。