需要创建可扩展的目录
Need to create a Table of Contents that expands
我是编程的初学者,并为我的班级分配了一个项目。我需要为脚本创建一个目录。 必须有"反向链接"。我有这一部分,但是当我试图做第二部分:使使徒行传可扩展以查看章节,这是链接,我遇到了麻烦。 我没有任何javascript知识,也不知道从这里开始...这是我到目前为止所拥有的:
<dl>
<dt><span onclick="showHide(this)">Act One</span></dt>
<dd style="display: none"><ul><li><a href="#chapter_toc1" id="chapter1">Chapter I - Subservient Twilight</a></li>
<li><a href="#chapter_toc39" id="chapter39">Chapter II - Cat Handler</a></li>
<li><a href="#chapter_toc151" id="chapter151">Chapter III - Tutorial</a></li>
<li><a href="#chapter_toc172" id="chapter172">Chapter IV - Journey Into Faron Woods</a></li>
<li><a href="#chapter_toc207" id="chapter207">Chapter V - Faron Descends In to Twilight</a></li></ul></dd>
<dt><span onclick="showHide(this)">Act Two</span></dt>
<dd style="display: none"><ul><li><a href="#chapter_toc272" id="chapter272">Chapter I - The World of Ruin</a></li>
<li><a href="#chapter_toc306" id="chapter306">Chapter II - Sword and Shield</a></li>
<li><a href="#chapter_toc357" id="chapter357">Chapter III - Chosen Hero of the Gods</a></li>
<li><a href="#chapter_toc398" id="chapter398">Chapter IV - The Forest Temple</a></li></ul></dd>
<dt><span onclick="showHide(this)">Act Three</span><dt>
<dd style="display: none"><ul><li><a href="#chapter_toc429" id="chapter429">Chapter I - Servant of Twilight</a></li>
<li><a href="#chapter_toc444" id="chapter444">Chapter II - Forgotten Hero</a></li>
<li><a href="#chapter_toc500" id="chapter500">Chapter III - Sumo Wrestling</a></li>
<li><a href="#chapter_toc607" id="chapter607">Chapter IV - The Passage Into Death Mountain</a></li>
<li><a href="#chapter_toc721" id="chapter721">Chapter V - Goron Mines</a></li></ul></dd>
<dt><span onclick="showHide(this)">Act Four</span></dt>
<dd style="display: none"><ul><li><a href="#chapter_toc775" id="chapter775">Chapter I - Castle Under Siege</a></li>
<li><a href="#chapter_toc814" id="chapter814">Chapter II - Serenade of Water</a></li>
<li><a href="#chapter_toc861" id="chapter861">Chapter III - Under the Great Bridge of Hylia</a></li>
<li><a href="#chapter_toc896" id="chapter896">Chapter IV - Flight to Kakariko</a></li>
<li><a href="#chapter_toc1009" id="chapter1009">Chapter V - Lakebed Temple</a></li></ul></dd>
<dt><span onclick="showHide(this)">Act Five</span><dt>
<dd style="display: none"><ul><li><a href="#chapter_toc1044" id="chapter1044">Chapter I - Midna's Desperate Hour</a></li>
<li><a href="#chapter_toc1115" id="chapter1115">Chapter II - The Blade of Evil's Bane</a></li>
<li><a href="#chapter_toc1120" id="chapter1120">Chapter III - Mirage of the Ancient Gerudo</a></li>
<li><a href="#chapter_toc1176" id="chapter1176">Chapter IV - Arbiter's Grounds</a></li></ul></dd>
<dt><span onclick="showHide(this)">Act Six</span></dt>
<dd style="display: none"><ul>
<li><a href="#chapter_toc1211" id="chapter1211">Chapter I - Yetis and Soup</a></li>
<li><a href="#chapter_toc1288" id="chapter1288">Chapter II - Snowpeak Ruins</a></li>
<li><a href="#chapter_toc1309" id="chapter1309">Chapter III - Temple of Time</a></li></ul></dd>
<dt><span onclick="showHide(this)">Act Seven</span></dt>
<dd style="display: none"><ul><li><a href="#chapter_toc1337" id="chapter1337">Chapter I - Fractured Memories</a></li>
<li><a href="#chapter_toc1466" id="chapter1466">Chapter II - Hidden Village of the Shadow Tribe</a></li>
<li><a href="#chapter_toc1523" id="chapter1523">Chapter III - Cannon Ride to the Stars</a></li>
<li><a href="#chapter_toc1549" id="chapter1549">Chapter IV - City in the Sky</a></li></ul></dd>
<dt><span onclick="showHide(this)">Act Eight</span></dt>
<dd style="display: none"><ul><li><a href="#chapter_toc1558" id="chapter1558">Chapter I - Palace of Twilight</a></li>
<li><a href="#chapter_toc1611" id="chapter1611">Chapter II - Of Worlds Left Behind</a></li></ul></dd>
您的代码不显示任何showHide
函数。 您需要做的就是创建它。 它可能看起来像这样:
<script>
function showHide(actElement) {
var current = actElement.firstChild.style.display;
if (current == "none") {
actElement.firstChild.style.display = "block";
} else {
actElement.firstChild.style.display = "none";
}
}
</script>
有更短的方法来编写它,具有相同的功能,例如:
<script>
function showHide(actElement) {
actElement.firstChild.style.display = (actElement.firstChild.style.display == "block") ? "none" : "block";
}
</script>
这样做完全相同,但以更简洁的方式。
相关文章:
- 可扩展的画布作为Google Maps Javascript API中的覆盖
- 如何为表构建可扩展的子行(jQuery/Javascript)
- 需要创建可扩展的目录
- 为每个帖子添加可扩展的文本框
- 可扩展的 Div,在 CSS 中具有过渡功能
- 使用 JavaScript JQUERY 或 CSS 制作可扩展的顶部栏
- 如何在 ExpressJS 中创建可扩展的控制器
- 如何对数组中的嵌入式文档执行可扩展的批量更新
- 使用 Nodejs 构建可扩展的网站
- d3.js可折叠/可扩展的带标签的力图表
- 如何使用Meteor构建可扩展的活动流或新闻源
- angular ui路由器:创建可扩展的、不改变url的布局状态
- 有没有一种更优雅、可扩展的方式可以向JQuery验证自定义方法添加多个条件
- 很好的实现了可扩展的JavaScript应用架构(Sandbox by Nicholas Zakas)
- Bootstrap可扩展的边栏元素
- 淘汰:可扩展的主题组件
- 可扩展的横幅CSS,Javascript,Flash
- ANGULARJS可扩展的搜索栏
- 如何创建可扩展的电子应用程序
- 创建可扩展的广告-没有闪光灯