2017-07-01 5 views
1

私は講義でスライドの代わりにブックダウン(html)を使用しています。私は実際に質問の解決策を含むように見える/消えるブロックを作りたいと思っています。 おそらく私はcssでそれをすることができます。cssを使用してhtmlで表示され消えるブロックを含める方法

質問:かくかくしかじかしかし、私はbookdownのCSS

例を台無しにすることなく、これを実行しても、私のCSSを含める方法を今すぐではないのですか?

ソリューションuncover

私はUNCOVERをクリックすると、私は私のRコードおよび出力を示すことができました。 それはすばらしいでしょう:)

答えて

0

あなたはニットフックを通してあなたが望むものを達成することができます。コードチャンク(この例ではuncover = TRUE)のフックオプションを設定すると、対応するフック関数uncoverがトリガーされ、チャンク出力から生成されたhtmlコードの前後に何かを書き込むことができます。

以下のコードでは、特定のhtml要素をidで解読できるJavaScript関数function uncover(id)を定義しています。そしてフックuncoverは、チャンク出力の前にJavascript関数を呼び出し、特定のIDを持つdivと出力をラップするhtmlボタンを生成し、style.display =なしとします。あなたは、あなたのニーズに適応するために、以下のコードを修正することができますが、その考え方は次のようなものです。

```{r setup, include=FALSE} 
knitr::opts_chunk$set(echo = TRUE) 
uncover <- function(before, options, envir) { 
    if (before) { 
     id <- options$id 
     button_string <- paste0("<button onclick=\"uncover('", 
           id, 
           "')\">Uncover</button>") 
     div_string <- paste0("<div id = '", id, 
          "', style = 'display:none'>") 
     paste0(button_string, "\n", div_string) 
    } 
    else { 
     "</div>" 
    } 
} 

knitr::knit_hooks$set(uncover = uncover) 
``` 
<script> 
function uncover(id) { 
    var x = document.getElementById(id); 
    x.style.display = 'block'; 
} 
</script> 

```{r, uncover = TRUE, id = "script"} 
1 + 1 
``` 
+0

ありがとうございます!それは本当に素晴らしいです。 「

関連する問題