5

FiveThirtyEight のメモは、メモ タグをクリックすると、メイン コンテンツの下または横ではなく、段落内または段落の下に展開されます。脚注の代わりにin-notesと呼ぶことができます。

私はそれらが非常に効率的であり、私が見た中で最もウェブに適したメモシステムであると信じています. （もちろん、私はネイト・シルバーをそのようにファンボーイしたくはありません。）

これらのインノートをどのようにコーディングすればよいですか?

jquery やその他の言語を使用した解決策を見てきましたが、538 は HTML と CSS のみを使用しているようです。

おそらく何かを仕上げることができると思います<details>が、より良い答えがあると期待しています。538 のソースコードを見ましたが、どのコードが関連しているかわかりません。

最新性のために選択された記事の例。最初の脚注をクリックします。

これは重複している可能性がありますが、私の無知ではそうではないと思います。

編集: Elvislives は、538 が実際に JavaScript を使用していると答えました。JavaScript の知識が不足しているため、私の質問は、HTML5 だけでインライン ノートを作成できますか?

4

2 に答える 2

3

538 は、脚注の表示/非表示機能に JavaScript を使用しています。脚注テキストには、ページロード時に css display:none があり、脚注がクリックされると、javascript が css を脚注の display:block に変更します。

以下は jsbin の例です: http://jsbin.com/vewibexedu/edit?html,css,js,output

編集: html/css のみでこれを行う方法についての編集要求に応じて、css フォーカスを使用して表示ブロックを切り替え、何も表示しないようにすることができます。脚注を閉じる機能は、css のみの場合は js の場合よりも少しトリッキーになります。ここでは、538 のように脚注番号を置き換えるのではなく、閉じるボタンが脚注の最後にある例を実装しました。これは CSS のみの回避策の 1 つです。 http://jsbin.com/cexeyegodo/edit?html,css,output

于 2016-10-31T05:11:05.730 に答える
3

非表示のチェックボックスを使用した HTML/CSS のみのソリューション:

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;}
于 2016-11-02T22:58:09.590 に答える