在 Shiny 中选择选项时如何关闭汉堡菜单的下拉菜单答案

【问题标题】：how to get closed dropdown of hamburger menu when an option has been selected in Shiny在 Shiny 中选择选项时如何关闭汉堡菜单的下拉菜单
【发布时间】：2019-10-03 23:27:04
【问题描述】：

我在 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)

【问题讨论】：

您确定您的代码示例与问题相符吗？我没有看到运行您的代码的下拉菜单，...
不，也许“下拉菜单”不是正确的术语。但是当浏览器窗口变窄时，导航栏菜单会缩小为汉堡按钮。单击此按钮时，会出现一种下拉菜单。当用户选择其中一个选项（在代码中：“Panel1”、“Panel2”或“Panel3”）时，此“下拉菜单”应该消失。

标签： javascript css drop-down-menu shiny navbar

【解决方案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)

【讨论】：