我想知道我需要学习什么才能在 HTML 页面而不是 Microsoft Word 文档中执行此操作。
我使用 Word 创建冗长的文档，并使用标题。 Word 有一个内置的文档结构图，它作为文档左侧的“框架”存在。它读取文档中的任何标题并将它们作为可展开和可折叠的链接放在左 Pane 中。这使用户只需单击左 Pane 中的标题即可轻松浏览长文档。
有谁知道我是否可以用 HTML 和 CSS 做到这一点，或者我是否需要学习 JavaScript 或其他东西。
我想创建一个框架，自动收集我的标题并在左侧框架中创建这些链接，就像在 Microsoft Word 中一样，但我想在 HTML 页面中这样做。
如果有人知道并且您可以指出我需要学习的正确方向，我将不胜感激。
Word 的文档映射 http://www.howtogeek.com/76818/learn-how-to-use-the-document-map-in-word-2007/
我希望它看起来像这样，但以某种方式自动生成。 http://www.telerik.com/help/aspnet-ajax/introduction.html
谢谢， 编写器
感谢下面的评论。它给了我一个起点。
最佳答案
我一直在寻找同样的东西...所以我写了一些快速代码来做类似的事情:
<html>
<header>
<style>
pre {
white-space: pre-wrap;
}
#docmap {
background-color: #f0f0f0;
height: 100%;
width: 200px;
position: fixed;
}
#main {
margin-left: 200px;
position: 200px;
padding: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready( readyFn );
function readyFn( $ ) {
var docmap = $("#docmap");
var main = $("#main");
for(i=0; i < 100; i++) {
main.append("<br>");
}
var all = main.find("h1, h2, h3, h4, h5, h6");
docmap.append("<pre>");
iii = 1;
all.each(function(){
nextid = "link_" + iii;
jQuery(this).attr("id", nextid);
var level = this.tagName.slice(1)
var indent = ""
for(i=0; i < level; i++) {
indent += "*";
}
docmap.append("<a href=#" + nextid + ">" + indent +" " + this.innerHTML + "</a><br>");
iii++;
});
docmap.append("</pre>");
}
</script>
</header>
<body>
<div id="docmap"></div>
<div id="main"><pre>
<h1>Jabberwocky 1</h1>
'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.
'Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!'
<h2>Jabberwocky 2</h2>
He took his vorpal sword in hand:
Long time the manxome foe he sought --
So rested he by the Tumtum tree,
And stood a while in thought.
'Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!'
<h1>Jabberwocky 3</h1>
testing 456
<h2>A Strange Wild Song</h2>
A Strange Wild Song - Poem by Lewis Carroll
Autoplay next video
He thought he saw an Elephant
That practised on a fife:
He looked again, and found it was
A letter from his wife.
'At length I realize,' he said,
'The bitterness of life! '
He thought he saw a Buffalo
Upon the chimney-piece:
He looked again, and found it was
His Sister's Husband's Niece.
'Unless you leave this house,' he said,
'I'll send for the police! '
</pre></div>
</body></html>
关于javascript - HTML - 根据标题展开/折叠？ "document map"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21472443/