【问题标题】:Collapse (close) Menu in SidebarMenu of Shinydashboard on button click单击按钮时 Shinydashboard 的 SidebarMenu 中的折叠(关闭)菜单
【发布时间】:2018-04-30 07:19:40
【问题描述】:

我正在使用与以下类似的应用程序。我的输入面板位于最初扩展的菜单下的侧边栏中。我想折叠菜单并隐藏所有输入面板,以便我的侧边栏干净。但它应该在我展开时​​出现(而不是永久隐藏)。我尝试了以下解决方案,但它不起作用。请帮助我找到解决方案或任何替代方法。

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        startExpanded = TRUE,
        "Menu 1",
        column(
          width = 12,
          actionButton("hideMe", label = "Collapse Me", icon = icon("close"))
        )
      )
    )
  ),
  body = dashboardBody()
)
server <- function(input, output, server){
  observeEvent(input$hideMe, {
    shinyjs::hide(selector = "ul.menu-open");
  })
}

runApp(shinyApp(ui, server))

【问题讨论】:

    标签: r shiny shinydashboard reactive shinyjs


    【解决方案1】:

    您需要将useShinyjs()添加到ui部分

    library(shiny)
    library(shinydashboard)
    library(shinyjs)
    
    ui <- dashboardPage(
            header = dashboardHeader(),
            sidebar = dashboardSidebar(
                    useShinyjs(),
                    sidebarMenu(
                            menuItem(
                                    startExpanded = TRUE,
                                    "Menu 1",
                                    column(
                                            width = 12,
                                            actionButton("hideMe", label = "Collapse Me", icon = icon("close"))
                                    )
                            )
                    )
            ),
            body = dashboardBody()
    )
    server <- function(input, output, server){
            observeEvent(input$hideMe, {
                    shinyjs::hide(selector = "ul.menu-open");
            })
    }
    
    runApp(shinyApp(ui, server))
    

    【讨论】:

    • 谢谢,诀窍是把useShinyjs() 放在ui 部分。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-05-05
    • 2014-02-14
    • 2014-02-25
    • 2023-03-05
    • 2018-05-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多