单击时隐藏闪亮仪表板上的下拉选项

Question

我想menuSubItem在单击该字段外部时退出选项 ( )，但单击外部时该选项不会消失。我尝试了CSS的解决方案，但没有成功！我的代码：

library(shiny)
library(shinydashboard)

header <- dashboardHeader(title = "Dashboard", titleWidth = 320)

sidebar <- dashboardSidebar(
  width = 320,
  sidebarMenu(
    menuItem(
      text = "A1"
    ),
    menuItem(
      text = "A2",
      menuSubItem(
        text = "AA1"
      ),
      menuSubItem(
        text = "AA2"
      ), 
      menuSubItem(
        text = "AA3"
      )
    )
  )
)

body <- dashboardBody()

ui <- dashboardPage(header = header, sidebar, body)

server <- function(input, output) {
  
}

shinyApp(ui, server)

我想在外部单击并在单击完成后A2让它 ( ) 关闭下拉菜单。A2

我尝试在正文中插入此代码：

body <- dashboardBody(

  HTML(
  "<script>

  $(function() {

    $(document).on('click', function() {
      $('.skin-blue .treeview-menu>li>a').slideUp();
    });
 
  });

  </script>"
  )

)

但不要工作。

Answer 1

我们可以提供menuItem并id删除 css 类menu-open：

library(shiny)
library(shinydashboard)

header <- dashboardHeader(title = "Dashboard", titleWidth = 320)

sidebar <- dashboardSidebar(width = 320,
                            sidebarMenu(
                              menuItem(text = "A1"),
                              menuItem(
                                text = "A2",
                                id = "A2ID",
                                menuSubItem(text = "AA1"),
                                menuSubItem(text = "AA2"),
                                menuSubItem(text = "AA3")
                              )
                            ))

body <- dashboardBody(tags$script(
  HTML(
    "$(document).on('shiny:connected', function(event) {
        $(document).on('click', function(evt) {
          if($(evt.target).closest('#sidebarItemExpanded > ul > li.treeview').length)
            return;
          var el = document.getElementById('A2ID');
          el.style.display = 'none';
          el.classList.remove('menu-open');
      });
    });"
  )
))

ui <- dashboardPage(header = header, sidebar, body)

server <- function(input, output, session) {}

shinyApp(ui, server)

一些相关链接：

jQuery 单击页面中除 1 div 之外的任意位置

https://github.com/rstudio/shinydashboard/issues/347