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

我在课堂上使用bookdown（html）而不是幻灯片。我真的很想创建出现/消失的块，以包含问题的解决方案。 也许我可以用css来做。但我现在不知道如何做到这一点，也包括我的css没有混乱与向下的css书籍

例如：

问题：布拉布拉布拉布拉

解决方案

当我点击uncover时，我可以显示我的R代码和输出。

---

那太好了：）

你可以通过刀叉实现你想要的。当您为代码块设置钩子选项时（在本例中为

uncover=TRUE

），它将触发相应的钩子函数

uncover

，钩子可以在从块输出生成的html代码之前和之后写入内容

在下面的代码中，我首先定义了一个Javascript函数

函数uncover（id）

它可以通过id发现特定的html元素。我让钩子

发现

生成一个html按钮，它在区块输出之前调用Javascript函数，并用带有特定id和

style.display=

的

div

包装输出。您可以对下面的代码进行修改，以适应您的需要，但想法是这样的

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

`{r设置，include=FALSE}
knitr:：opts_chunk$set（echo=TRUE）
揭开你可以通过刀叉实现你想要的。当您为代码块设置钩子选项时（在本例中为
uncover=TRUE
），它将触发相应的钩子函数
uncover
，钩子可以在从块输出生成的html代码之前和之后写入内容

在下面的代码中，我首先定义了一个Javascript函数
函数uncover（id）
它可以通过id发现特定的html元素。我让钩子
发现
生成一个html按钮，它在区块输出之前调用Javascript函数，并用带有特定id和
style.display=
的
div
包装输出。您可以对下面的代码进行修改，以适应您的需要，但想法是这样的

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

`{r设置，include=FALSE}
knitr:：opts_chunk$set（echo=TRUE）
谢谢你！！！那真是太好了。请问在哪里最好放
零件？我也应该用Knitr吗？我知道了。我应该在输出中包含yaml:bookdown:：gitbook:includes:in_header:uncover.htmlun幸运的是，这段代码不再正常工作。而不是正确格式的R代码，我有``R。。。就像文本输出一样。@EduardoSilva问题在于当前knitr或pandoc或工具链中的其他东西拒绝将不可见的标记元素转换为有效的HTML，因此您将看到原始标记元素。一个解决方案是首先让所有的东西都可见，但是提供一个按钮来隐藏它们，就像我在附录中所做的那样。谢谢！！！那真是太好了。请问在哪里最好放
零件？我也应该用Knitr吗？我知道了。我应该在输出中包含yaml:bookdown:：gitbook:includes:in_header:uncover.htmlun幸运的是，这段代码不再正常工作。而不是正确格式的R代码，我有``R。。。就像文本输出一样。@EduardoSilva问题在于当前knitr或pandoc或工具链中的其他东西拒绝将不可见的标记元素转换为有效的HTML，因此您将看到原始标记元素。一个解决方案是首先让所有的东西都可见，但提供一个按钮来隐藏它们，就像我在补充答案中所做的那样。