Question

当点击注释标记时，FiveThirtyEight上的注释会在段落内部或下方展开，而不是在主要内容的下方或旁边。而不是脚注，它们可以被称为 in-notes 。

我发现它们非常高效，并且相信它们是我所见过的最适合网络的音符系统。（当然，我真的不想像那样狂热Nate Silver。）

如何编写这些内注？

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

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

选择

Example article是因为它的新近感。单击第一个脚注。

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

编辑： Elvislives回答538确实使用了javascript。由于我缺乏javascript知识，我想，我的问题就变成了，我能用HTML5制作内联笔记吗？

Answer 1

538正在使用javascript进行脚注显示/隐藏功能。脚注文本有css显示：在页面加载时没有，当单击脚注时，javascript将css更改为显示：脚注上的块。

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

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

Answer 2

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

<强> HTML

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

（如果有人可以编辑它以正确格式化我会非常感激。不确定如何格式化只有一行的代码块。）

<强> CSS

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

仅包含HTML / CSS的内联脚注（内注？）

2 个答案: