只有HTML/CSS的行内脚注(in-notes?)

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

我发现它们非常有效，相信它们是我见过的最适合网络的笔记系统。(当然了，我可不想把内特·西尔弗当粉丝。)

我如何编写这些注释?

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

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

选择示例文章是因为它最近。点击第一个脚注。

这可能是一个复制品，但由于我的无知，我相信它不是。

EDIT: Elvislives回答说538确实使用javascript。由于我缺乏javascript的知识，我的问题，我想，然后变成，我可以只用HTML5做内联笔记吗?

538是使用javascript的脚注显示/隐藏功能。脚注文本在页面加载时有css display:none，当脚注被点击时，javascript将css更改为在脚注上显示:block。

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

编辑:响应你的编辑请求如何做到这一点，只有html/css，你可以使用css焦点来切换显示块和不显示。脚注关闭功能在css中会比在js中更复杂一些。我在这里实现了一个示例，其中关闭按钮位于脚注的末尾，而不是像538那样替换脚注编号——这是一个仅使用css的解决方案。http://jsbin.com/cexeyegodo/edit?html、css、输出

使用隐藏复选框的纯HTML/css解决方案:

<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;}

相关内容

最新更新

热门标签：