优化Shiny模块中shinyjs显示/隐藏点击交互实现的建议

针对你提出的两个问题，以下是简化且可维护的实现方案，既避免了遍历所有面板的冗余操作，又将全部逻辑封装到模块中，主server无需额外编写observeEvent：

优化后完整代码 #

library(shiny)
library(bslib)
library(shinyjs)

# 子模块：单个可展开的Value Box UI
cont_box_ui <- function(id) {
  ns <- NS(id)
  div(
    id = ns("expand_box"),
    # 点击时触发模块内部的输入信号（用Date.now()确保每次点击都能触发响应）
    onclick = sprintf("Shiny.setInputValue('%s', Date.now())", ns("box_clicked")),
    value_box(
      title = "Click me",
      value = "10",
      theme = value_box_theme(bg = "white"),
      # 隐藏的扩展内容
      hidden(
        div(
          id = ns("expanded_content"),
          tags$p("This is additional information."),
          actionButton(ns("btn"), "Click me") # 修正命名空间，避免ID冲突
        )
      )
    )
  )
}

# 子模块：返回点击信号，供父模块处理
cont_box_server <- function(id) {
  moduleServer(id, function(input, output, session) {
    # 返回当前模块的点击事件信号
    return(reactive(input$box_clicked))
  })
}

# 父模块：管理所有Value Box的展开/折叠状态
cont_boxes_server <- function(box_ids) {
  moduleServer("cont_boxes", function(input, output, session) {
    # 存储上一次点击的Value Box ID
    last_clicked_id <- reactiveVal(NULL)
    
    # 为每个子模块创建实例，获取点击信号
    click_signals <- lapply(box_ids, function(id) {
      cont_box_server(id)
    })
    
    # 统一监听所有子模块的点击事件
    observeEvent(click_signals, {
      # 定位当前被点击的模块ID
      current_id <- box_ids[which(sapply(click_signals, function(sig) !is.null(sig())))]
      if (length(current_id) == 0) return()
      current_id <- current_id[1]
      
      # 仅隐藏上一次点击的模块内容，无需遍历全部
      if (!is.null(last_clicked_id())) {
        shinyjs::hide(session$ns(paste0(last_clicked_id(), "-expanded_content")))
      }
      
      # 显示当前点击的模块内容
      shinyjs::show(session$ns(paste0(current_id, "-expanded_content")))
      
      # 更新上一次点击的ID记录
      last_clicked_id(current_id)
    }, ignoreNULL = TRUE)
  })
}

# 主UI
ui <- page_sidebar(
  sidebar = sidebar(
    useShinyjs(),
    cont_box_ui("1"),
    cont_box_ui("2"),
    cont_box_ui("3")
  ),
  mainPanel()
)

# 主Server
server <- function(input, output, session) {
  # 仅需调用父模块，传入所有子模块的ID列表
  cont_boxes_server(c("1", "2", "3"))
}

shinyApp(ui, server)

关键优化点说明 #

1. 避免遍历所有面板 #

• 通过reactiveVal维护last_clicked_id，记录上一次点击的模块ID
• 每次新点击时，仅对last_clicked_id对应的内容执行隐藏操作，无需遍历其他所有面板，大幅减少冗余操作

2. 完全封装逻辑到模块 #

• 子模块：仅负责自身UI渲染和点击信号的输出，不处理显示/隐藏逻辑
• 父模块：统一管理所有子模块的状态，监听点击事件并处理展开/折叠逻辑
• 主Server：仅需调用父模块并传入子模块ID列表，无需编写任何额外的observeEvent或状态管理代码

3. 其他细节优化 #

• 修正了原代码中actionButton未使用命名空间的问题，避免多模块场景下的ID冲突
• 用Date.now()作为点击事件的触发值，确保重复点击同一模块时也能正常触发状态更新

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