如何使用 css 包含在 html 中出现和消失的方块

Question

我在讲座中使用 bookdown (html) 而不是幻灯片。我真的很想创建 appear/disappear 的块来包含问题的解决方案。大概我可以通过 css 来完成。但我现在不知道如何做到这一点，并且还包括我的 css 而不会弄乱 bookdown css

示例：

问题：bla bla bla ?

解决方案uncover

当我点击 uncover 时，我可以显示我的 R 代码和输出。那太好了:)

Answer 1

你可以通过 knitr hooks 实现你想要的。当你为code chunk设置一个hook选项时（本例uncover = TRUE），会触发相应的hook函数uncover，hook可以在生成的html代码前后写入一些东西从块输出。

在下面的代码中，我首先定义了一个Javascript函数function uncover(id)，它可以通过id发现某些html元素。我让钩子 uncover 生成一个 html 按钮，它在块输出之前调用 Javascript 函数，并用具有特定 id 和 [=17 的 div 包装输出=]none`。您可以对下面的代码进行修改以适应您的需要，但思路是这样的。

```{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
```

编辑于 2020 年 5 月 3 日目前，knitr 或 pandoc 或工具链中的其他东西拒绝将不可见的 markdown 元素转换为有效的 HTML，因此上述解决方案无法完美运行。一种解决方案是首先使所有内容可见，但提供一个按钮来隐藏它们，如下所示：

```{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, 
                             "' class = 'cover'>")
        paste0(button_string, "\n", div_string)
    }
    else {
        "</div>"
    }
}

knitr::knit_hooks$set(uncover = uncover)
```

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

<script>
function uncover(id) {
    var x = document.getElementById(id);
    x.style.display = 'block';
}

function cover() {
    var xs = document.getElementsByClassName('cover');
    for(count = 0; count < xs.length; count++) {
        xs[count].style.display = 'none';
    }
}
</script>

<button onclick="cover()">Cover all</button>

如何使用 css 包含在 html 中出现和消失的方块

how to include blocks that appear and disappear in html using css

css

r

rstudio

bookdown