插入展开的链接列表

在编写博客、文章时，我们经常需要在正文中加入链接列表，以便读者查看更多相关信息。通常情况下，我们会将所有链接都罗列在文章中，但有时这样做会让文章显得臃肿，影响阅读体验。这时就可以采用展开的链接列表来优化文章结构，使得链接部分更加精简、清晰。

本篇介绍如何使用HTML和CSS来实现展开的链接列表，并提供代码示例。当然，这种效果也可以通过JavaScript/JQuery来实现，这里我们只讲解纯HTML/CSS方式。

效果展示

在正文中插入一个展开的链接列表，如下所示：

点击列表标题部分，就可以展开或收起链接列表。效果如下图所示：

代码实现

下面我们来看具体的代码实现。首先，需要使用<details> 和 <summary> 这两个HTML5标签来实现展开和标题效果。其中，<details> 标签用来包含链接列表，<summary> 标签则表示列表标题。如下所示：

<details>
  <summary>更多相关链接</summary>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
    <li><a href="#">链接4</a></li>
  </ul>
</details>

接下来，我们需要用CSS样式实现展开和收起的效果。具体实现如下，注释详细：

/* 将 summary 设置为可点击的手形光标 */
summary {
  cursor: pointer;
}

/* 隐藏 details 中的内容，直到展开后才显示 */
details:not([open]) > *:not(summary) {
  display: none;
}

/* 设置 details 列表的样式 */
details {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

总结

通过上述代码实现，展开的链接列表就可以完美地嵌入到文章或博客中。该效果简单易用，能够优化文章结构，提高阅读体验。当然，展开的链接列表的样式可以根据具体需求进行调整，比如可以修改列表的背景色、文字颜色等。