如何修改JS代码在bs4Dash中实现Shiny Box折叠功能？

修改后的完整代码 #

library(shiny)
library(bs4Dash)
library(shinyjs)

jscode <- "
shinyjs.collapse = function(boxid) {
  $('#' + boxid).closest('.card').find('[data-widget=collapse]').click();
}"

ui <- bs4DashPage(
  bs4DashHeader(),
  bs4DashSidebar(),
  bs4DashBody(
    useShinyjs(),
    extendShinyjs(text = jscode, functions = c("collapse")),
    actionButton("bt2", "Collapse box2"),
    br(), br(),
    box(id = "box2", collapsible = TRUE, p("Box 2"))
  )
)

server <- function(input, output) {
  observeEvent(input$bt2, {
    js$collapse("box2")
  })
}

shinyApp(ui, server)

关键修改说明 #

• 依赖与UI组件替换：将原代码中的shinydashboard库替换为bs4Dash，同时对应更新页面布局组件（dashboardPage→bs4DashPage、dashboardHeader→bs4DashHeader等），适配bs4Dash的UI框架结构。
• JS选择器调整：bs4Dash的Box组件基于Bootstrap 4的Card实现，容器类名从shinydashboard的.box变为.card。因此需要将JS函数中的$('#' + boxid).closest('.box')修改为$('#' + boxid).closest('.card')，确保能准确定位到Box容器并触发折叠按钮的点击事件。

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