如何在Quarto中实现类似R Markdown的下拉菜单多图展示？

问题描述 #

我希望在Quarto中创建下拉菜单来展示多个图表。在R Markdown中，只需使用# Dropdown menu {.tabset .tabset-dropdown}搭配##即可轻松实现，以下是R Markdown的可复现代码及效果展示。我参考Quarto的Tabsets文档，尝试用::: {.tabset-dropdown}语法实现，但未得到预期的下拉菜单效果，请问能否在Quarto中实现相同功能？

R Markdown示例代码 #

---
title: "Dropdown menu in Rmarkdown"
date: "2022-08-29"
output: html_document
---

# Dropdown menu {.tabset .tabset-dropdown}

## Plot 1

```{r, echo=FALSE}
plot(1:10, 10:1)

Plot 2 #

hist(rnorm(100))

Plot 3 #

plot(rnorm(10), rnorm(10))

### 我的Quarto尝试代码
```quarto
---
title: "Dropdown menu in Quarto"
format: html
---

::: {.tabset-dropdown}

## plot1

```{r}
plot(1:10, 1:10)

plot2 #

hist(rnorm(100))

:::

## 解决方案
可以在Quarto中实现相同的下拉菜单功能，问题出在语法使用方式上，正确做法是结合**标题属性**和`tabset-dropdown`类：

### 正确的Quarto代码
```quarto
---
title: "Dropdown menu in Quarto"
format: html
---

# 下拉菜单 {.tabset .tabset-dropdown}

## 图表1

```{r}
plot(1:10, 10:1)

图表2 #

hist(rnorm(100))

图表3 #

plot(rnorm(10), rnorm(10))

### 关键说明
- 在Quarto中，下拉菜单的实现逻辑和R Markdown类似，需要为一级标题添加`.tabset .tabset-dropdown`两个类
- 不需要使用`:::`容器包裹，直接将类属性附加到标题上，之后的二级标题会自动成为下拉菜单中的选项
- 生成的HTML输出中，二级标题对应的内容会被收纳到下拉菜单里，点击不同选项即可切换展示对应的图表

内容的提问来源于stack exchange，提问作者Quinten