Question

我在R Shiny中有一个可折叠的导航栏菜单。菜单折叠后，当我单击“汉堡包”按钮时，将显示选项。当我单击一个选项时，（正确）选择了另一个面板，但菜单保持打开状态。

是否有可能（使用CSS？）使我选择其中一个选项后立即关闭“下拉菜单”（即选项列表）？

代码如下：

library(shiny)

ui <- tagList(
  navbarPage(
    title = NULL, id = "navBar", collapsible = TRUE,

    tabPanel(title = "Panel1", uiOutput('panel1')),
    tabPanel(title = "Panel2", uiOutput('panel2')),
    tabPanel(title = "Panel3", uiOutput('panel3'))
  )
)

server <- function(input, output, session) {
  output$panel1 <- renderUI({p("This is panel 1")})
  output$panel2 <- renderUI({p("This is panel 2")})
  output$panel3 <- renderUI({p("This is panel 3")})
}  

shinyApp(ui = ui, server = server)

Answer 1

您可以使用input$navBar（您在navbarPage()中的ID）在navbarPage上侦听并通过javascript触发更改。

  observeEvent(input$navBar, {
    runjs('
      var elem = document.getElementsByClassName("navbar-collapse")[0]
      elem.setAttribute("aria-expanded", "false");
      elem.setAttribute("class", "navbar-collapse collapse");
    ')
  })

可复制的示例：

library(shiny)
library(shinyjs)

ui <- tagList(
  useShinyjs(),
  navbarPage(
    title=NULL, id = "navBar", collapsible = TRUE,

    tabPanel(title = "Panel1", uiOutput('panel1')),
    tabPanel(title = "Panel2", uiOutput('panel2')),
    tabPanel(title = "Panel3", uiOutput('panel3'))
  )
)

server <- function(input, output, session) {
  output$panel1 <- renderUI({p("This is panel 1")})
  output$panel2 <- renderUI({p("This is panel 2")})
  output$panel3 <- renderUI({p("This is panel 3")})

  observeEvent(input$navBar, {
    runjs('
      var elem = document.getElementsByClassName("navbar-collapse")[0]
      elem.setAttribute("aria-expanded", "false");
      elem.setAttribute("class", "navbar-collapse collapse");
    ')
  })
}

shinyApp(ui = ui, server = server)

在Shiny中选择了一个选项后，如何关闭汉堡菜单的下拉菜单

1 个答案: