如何在RMarkdown HTML中为图片和data.frame创建下拉组件

方法一：修正bsplus代码实现需求 #

你的问题源于两个细节：一是未将表格转为HTML元素传入参数，二是原代码存在语法错误（第二个bs_append的content_side引号未闭合）。以下是修正后的可运行代码：

library(bsplus)
library(htmltools)
library(DT) # 可选，用于生成交互式美观表格

# 将data.frame转为可传入的HTML表格对象
table_html <- datatable(myTable, options = list(pageLength = 5)) %>% 
  htmltools::tagList()

# 创建侧边栏式折叠面板
bs_accordion_sidebar(id = "myAccordion") %>%
  bs_append(
    title = "标题1",
    content_side = table_html, # 传入HTML格式的表格
    content_main = htmltools::img(src = url1, style = "max-width:100%;")
  ) %>%
  bs_append(
    title = "标题2",
    content_side = table_html, # 可根据需求替换为不同表格
    content_main = htmltools::img(src = url2, style = "max-width:100%;")
  )

关键说明： #

• 用DT::datatable()把data.frame转为交互式HTML表格；如果不需要交互，也可以用htmlTable::htmlTable(myTable)或htmltools::tags$table()生成静态表格，再通过tagList()包装成符合bsplus参数要求的对象。
• 修复了原代码的语法错误，确保每个面板的内容与标题正确绑定，解决图片切换失效的问题。
• 给图片添加style="max-width:100%;"，保证图片自适应容器宽度。

方法二：直接使用Bootstrap原生折叠组件（无额外包依赖） #

如果不想依赖bsplus，可以直接用htmltools构建Bootstrap原生折叠面板，布局灵活性更高：

library(htmltools)
library(DT)

table_html <- datatable(myTable) %>% tagList()

# 构建自定义折叠面板
tags$div(
  class = "accordion", id = "bootstrapAccordion",
  
  # 第一个折叠项
  tags$div(class = "accordion-item",
    tags$h2(class = "accordion-header", id = "heading1",
      tags$button(class = "accordion-button", type = "button",
        `data-bs-toggle` = "collapse", `data-bs-target` = "#collapse1",
        "标题1"
      )
    ),
    tags$div(id = "collapse1", class = "accordion-collapse collapse show",
      `aria-labelledby` = "heading1", `data-bs-parent` = "#bootstrapAccordion",
      tags$div(class = "accordion-body",
        tags$div(class = "row",
          tags$div(class = "col-md-6", table_html), # 表格占半宽
          tags$div(class = "col-md-6", img(src = url1, style = "max-width:100%;")) # 图片占半宽
        )
      )
    )
  ),
  
  # 第二个折叠项
  tags$div(class = "accordion-item",
    tags$h2(class = "accordion-header", id = "heading2",
      tags$button(class = "accordion-button collapsed", type = "button",
        `data-bs-toggle` = "collapse", `data-bs-target` = "#collapse2",
        "标题2"
      )
    ),
    tags$div(id = "collapse2", class = "accordion-collapse collapse",
      `aria-labelledby` = "heading2", `data-bs-parent` = "#bootstrapAccordion",
      tags$div(class = "accordion-body",
        tags$div(class = "row",
          tags$div(class = "col-md-6", table_html),
          tags$div(class = "col-md-6", img(src = url2, style = "max-width:100%;"))
        )
      )
    )
  )
)

优势： #

• 通过Bootstrap栅格系统（row/col）完全自定义表格与图片的排列方式（并排/上下均可）。
• 不依赖第三方包，仅使用基础htmltools，兼容性更强。

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