只有 HTML/CSS 的行内脚注（in-notes？）

Question

FiveThirtyEight 上的注释不是在主要内容下方或旁边，而是在单击注释标签时在段落内或段落下方展开。而不是 footnotes 它们可以被称为 in-notes.

我发现它们非常高效，并且相信它们是我见过的最适合网络的笔记系统。（当然，我真的不想那么喜欢 Nate Silver。）

如何对这些注释进行编码？

我环顾四周，看到了一些使用 jquery 或其他语言的解决方案，但看起来 538 仅使用 HTML 和 CSS.

我相信我可能可以用 <details> 骗取一些东西，但希望有更好的答案。我查看了 538 上的源代码，但我不确定哪个代码是相关的。

Example article 因其新近度而被选中。单击第一个脚注。

This 可能是重复的，但在我的无知中我认为它不是。

编辑： Elvislives 回答说 538 确实使用了 javascript。由于我对 javascript 缺乏了解，我想我的问题变成了，我可以只用 HTML5 做行内笔记吗？

Answer 1

538 将 javascript 用于脚注 show/hide 功能。脚注文本在页面加载时有 css display:none，单击脚注时 javascript 将脚注上的 css 更改为 display:block。

这是一个 jsbin 示例：http://jsbin.com/vewibexedu/edit?html,css,js,output

编辑：为了响应您关于如何仅使用 html/css 执行此操作的编辑请求，您可以使用 css 焦点来切换显示块和显示 none。脚注关闭功能在 css 中会比在 js 中更狡猾。我在这里实现了一个示例，其中关闭按钮位于脚注的末尾，而不是像 538 那样替换脚注编号 - 这是一个仅 css 的解决方法。 http://jsbin.com/cexeyegodo/edit?html,css,output

Answer 2

使用隐藏复选框的HTML/CSS-only解决方案：

HTML

<p>
  This is my text. I make a claim that needs a citation.
  <input type="checkbox" id="cb1" /><label for="cb1"><sup>1</sup></label>
  <span><br><br> This is the citation.<br><br></span>
  Continued text.
</p>

CSS

input[type=checkbox] ~ span {display:none;}
input[type=checkbox]:checked ~ span {display:inline;}
input[type=checkbox] {display:none;}

只有 HTML/CSS 的行内脚注（in-notes？）

In-line footnotes with only HTML/CSS (in-notes?)

html

css

footnotes