如何实现Shinydashboard侧边栏默认仅显示图标、hover时展开显示标签名

实现方案与代码修正 #

你代码无法生效的核心问题有两个：

• 没有在UI中初始化shinyjs，导致shinyjs提供的事件绑定、样式操作方法无法调用
• 事件绑定的目标元素选择器错误，不存在id为sidebarCollapsed的页面元素，正确的侧边栏选择器为.main-sidebar

以下是可直接运行的修正后代码：

library(shinydashboard)
library(plotly)
library(DT)
library(shinycssloaders)
library(shinyWidgets)
library(shinyBS)
library(shinyjs)

sidebar <- dashboardSidebar(collapsed = TRUE,
                            sidebarMenu(
                              # 可按需添加icon参数，折叠状态下会显示对应图标
                              menuItem("Victim", tabName = "victim", icon = icon("user")),
                              menuItem("Trafficker", tabName = "trafficker", icon = icon("user-secret"))
                            )
)

body <- dashboardBody(
  # 必须添加此行启用shinyjs功能
  useShinyjs(),
  tabItems(
    tabItem(tabName = "victim",
            h2("Victim tab")
    ),
    
    tabItem(tabName = "trafficker",
            h2("Trafficker tab")
    )
  )
)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "Human Trafficking"),
    sidebar,
    body
  ),
  server = function(input, output) { 
    # 鼠标移入侧边栏自动展开
    onevent("mouseenter", ".main-sidebar", removeCssClass(selector = "body", class = "sidebar-collapse"))
    # 鼠标移出侧边栏自动折叠
    onevent("mouseleave", ".main-sidebar", addCssClass(selector = "body", class = "sidebar-collapse"))
  }
)

运行后即可实现侧边栏默认折叠仅显示图标，鼠标悬浮时自动展开显示菜单文字的效果。

内容的提问来源于stack exchange，提问作者manu p