代码之家  ›  专栏  ›  技术社区  ›  Rohit Kumar Singh

闪亮仪表板侧栏中的可折叠菜单项

  •  3
  • Rohit Kumar Singh  · 技术社区  · 6 年前

    侧边栏中有两个菜单项。当前,如果单击任何菜单项,将显示所有菜单项的选项卡项。我想使其可折叠,如果我单击多个名称菜单,单个分析应折叠,如果我单击单个分析,多个分析应折叠。
    当前设计为

    enter image description here

    相同的可复制代码为

    library(shinydashboard)
    ui <- dashboardPage(
       dashboardHeader(title = "Dashboard", titleWidth = 290),  
      dashboardSidebar(
       width = 290,
      sidebarMenu(
       menuItem(
        "Multiple Incident Analysis",
        tabName = "dashboard",
        icon = icon("th")),      
      splitLayout(cellWidths = c("44%", "31%", "25%"),
                  dateInput("datefrom", "Date From:", format = "mm/dd/yyyy", Sys.Date()-5),
                  textInput("datefrom_hour", "Hour",
                            value = "12:00"),
                  textInput("datefrom_noon","AM/PM", value = "AM")),      
      splitLayout(cellWidths = c("44%", "31%", "25%"),
                  dateInput("dateto", "Date To:", format = "mm/dd/yyyy"),
                  textInput("dateto_hour", "Hour",
                            value = "11:59"),
                  textInput("dateto_noon","AM/PM", value = "PM")),
      menuItem("Single Analysis", 
               tabName = "widgets", 
               icon = icon("th")),
      numericInput("tckt", "Ticket Number : ", 12345,  width = 290),
      submitButton("Submit", width = "290")
    )),  
    dashboardBody(    
          ))
    shinyApp(ui, server)
    

    我无法在此中使用条件面板。

    1 回复  |  直到 6 年前
        1
  •  7
  •   Martin Schmelzer    6 年前

    下面是一种使用JavaScript的方法。注意事项:

    我们将菜单中的项目包装为 div ID为的容器 #mult #single

    我们添加了选择所有菜单按钮的JavaScript代码( li 元素),并添加单击事件。单击其中一个菜单项时,两个菜单项的状态 部门 容器是 toggle D

    library(shiny)
    library(shinydashboard)
    
    
    server <- function(input, output) { }
    jsc <- '
    $(document).ready(function () {
      $(".sidebar-menu").children("li").on("click", function() {
        $("#mult, #single").toggle();
      });
    });
    '
    
    ui <- dashboardPage(
      dashboardHeader(title = "Dashboard", titleWidth = 290),  
      dashboardSidebar(
        width = 290,
        sidebarMenu(
          menuItem(
            "Multiple Incident Analysis",
            tabName = "dashboard",
            icon = icon("th")),      
          div(id = "mult", splitLayout(cellWidths = c("44%", "31%", "25%"),
                      dateInput("datefrom", "Date From:", format = "mm/dd/yyyy", Sys.Date()-5),
                      textInput("datefrom_hour", "Hour",
                                value = "12:00"),
                      textInput("datefrom_noon","AM/PM", value = "AM")),      
          splitLayout(cellWidths = c("44%", "31%", "25%"),
                      dateInput("dateto", "Date To:", format = "mm/dd/yyyy"),
                      textInput("dateto_hour", "Hour",
                                value = "11:59"),
                      textInput("dateto_noon","AM/PM", value = "PM"))),
          menuItem("Single Analysis", 
                   tabName = "widgets", 
                   icon = icon("th")),
          div(id = "single", style="display: none;", numericInput("tckt", "Ticket Number : ", 12345,  width = 290)),
          submitButton("Submit", width = "290")
        )),  
      dashboardBody(
        tags$head(tags$script(jsc))
      ))
    
    
    
    
    
    shinyApp(ui, server)