📅 最后修改于: 2023-12-03 15:20:39.592000 🧑 作者: Mango
在编辑Markdown文档时，我们经常需要使用目录（Table of Contents，即TOC）来方便地浏览和定位文章内容。而TOC中的闭合属性表（Collapsed Attribute Table）则可以将TOC中的子目录进行折叠，以提高文档的可读性和美观性。
在Markdown中，我们通常使用两种方式来生成TOC：
通过使用第三方工具，例如markdown-toc、tocgenerator等，我们可以自动地生成TOC并在其中设置闭合属性表。这种方式简单易用，但需要安装额外的工具，并且需要保证工具的稳定性和兼容性。
手动生成TOC则需要编写一定量的代码来实现，但它可以更好地控制TOC的格式和样式。具体来说，我们可以在Markdown文档中添加如下代码以生成TOC（以下代码以使用anchorjs来为标题添加锚点为例）：
<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a href="#heading-1">Heading 1</a></li>
<li><a href="#heading-2">Heading 2</a>
<ul>
<li><a href="#subheading-1">Subheading 1</a></li>
<li><a href="#subheading-2">Subheading 2</a></li>
</ul>
</li>
<li><a href="#heading-3">Heading 3</a></li>
</ul>
</div>
在上述代码中，我们可以通过添加onclick属性来实现TOC的折叠和展开，例如：
<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a href="#heading-1">Heading 1</a></li>
<li><a href="#heading-2" onclick="return false;">Heading 2</a>
<ul style="display:none">
<li><a href="#subheading-1">Subheading 1</a></li>
<li><a href="#subheading-2">Subheading 2</a></li>
</ul>
</li>
<li><a href="#heading-3">Heading 3</a></li>
</ul>
</div>
在上述代码中，我们在onclick属性中添加了一个return false语句，以避免单击折叠按钮时会跳转到对应的标题。
以下为一个使用手动生成TOC并添加闭合属性表（使用jQuery）的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TOC with Collapsed Attribute Table</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* TOC style */
#toc_container {
border: 1px solid #ddd;
padding: 10px;
}
.toc_title {
font-weight: bold;
margin-bottom: 10px;
}
.toc_list li {
list-style: none;
}
.toc_list ul {
margin-left: 10px;
}
/* Collapse button style */
.collapse_btn {
float: right;
font-size: 75%;
}
</style>
</head>
<body>
<h1 id="heading-1">Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2 id="heading-2">Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h3 id="subheading-1">Subheading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h3 id="subheading-2">Subheading 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2 id="heading-3">Heading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a href="#heading-1">Heading 1</a></li>
<li>
<a href="#heading-2" class="collapse_btn">[+]</a>
<a href="#heading-2">Heading 2</a>
<ul style="display:none">
<li><a href="#subheading-1">Subheading 1</a></li>
<li><a href="#subheading-2">Subheading 2</a></li>
</ul>
</li>
<li><a href="#heading-3">Heading 3</a></li>
</ul>
</div>
<script>
// Toggle collapse button on TOC
$('.collapse_btn').click(function() {
$(this).text(function(i, text){
return text === '[+]' ? '[-]' : '[+]'
});
$(this).siblings('ul').slideToggle();
});
</script>
</body>
</html>
在上述示例中，我们通过jQuery来处理TOC的折叠和展开，具体来说，我们在折叠按钮（.collaspe_btn）的click事件中添加了一个匿名函数，以通过slideToggle()方法来显示或隐藏子目录，并通过更改按钮的文本（text()方法）来表示子目录的折叠状态。