如果有多个menuItems，MenuItem并不总是显示树

Question

我正在尝试为我的工作场所构建一个

shinydashboard

，以创建一个可搜索的表格来显示我们不同分支机构中谁擅长做什么。

我想要两个侧边栏项目，以按位置或按技术过滤表格。位置将是一棵树（国家/城市/名称），技术是一组按钮。

我的问题是当我从一个选项卡跳到另一个选项卡时。 如果我在跳转到技术选项卡之前关闭位置选项卡（或相反），则一切正常，但如果我打开技术选项卡而不关闭位置，树就会消失，并且我无法将其恢复。

我尝试用按钮替换树，在这种情况下，没有问题。无论我做什么，该按钮都会重新出现。

我有点不知道问题出在哪里。

当我尝试检查页面时，我没有看到任何错误来证明树消失的原因。我还尝试反转两个选项卡以查看树是否隐藏在第二个选项卡后面，但问题仍然相同。我很困惑为什么它只在我在选项卡中放置树而不是按钮时出现。

我要重现的代码：

# Create a dataframe
tree <- data.frame(
  Country = c("USA", "Canada", "UK", "France", "Germany"),
  City = c("New York", "Toronto", "London", "Paris", "Berlin"),
  Name = c("John", "Alice", "Michael", "Sophie", "David")
)



######################
#UI###################
######################



ui <- dashboardPage(
  dashboardHeader(title = "Filters"),
  dashboardSidebar(
    # Increase the width of the sidebar panel
    width = 280,
    useShinyjs(),
    sidebarMenu(
      menuItem("By Location", tabName = "location", icon = icon("globe"),
               fluidRow(
                 # This doesnt work
                 column(12, treeInput(inputId = "tree_loc",label = "Select facilities:",choices = create_tree(tree),selected = "",returnValue = "text",closeDepth = 0))
                 
                 #This work
                 #column(12, actionBttn(inputId = "all_btn0", label = "Show all/Hide all", style = "jelly", color = "danger"))
                 )),
      
      menuItem("By Technique", tabName = "technique", icon = icon("microscope"),
               fluidRow(
                 # Adjust column sizing and spacing
                 column(3, actionBttn(inputId = "group1_btn", label = "EM", style = "jelly", color = "danger")),
                 column(3, actionBttn(inputId = "group2_btn", label = "LM", style = "jelly", color = "danger")),
                 column(3, actionBttn(inputId = "group3_btn", label = "Preclinical", style = "jelly", color = "danger"))
                 
               ),
               fluidRow(
                 column(5, actionBttn(inputId = "group4_btn", label = "Other modality", style = "jelly", color = "danger")),
                 column(5, actionBttn(inputId = "group5_btn", label = "Image Analysis", style = "jelly", color = "danger"))
               ),
               fluidRow(
                 column(12, actionBttn(inputId = "all_btn", label = "Show all/Hide all", style = "jelly", color = "danger")),
               ))
    )
  ),
  
  dashboardBody(

    DTOutput("table"),
  )
)


######################
#SERVER###############
######################



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

}

shinyApp(ui, server)

Answer 1

您观察到的行为的原因是，每当位置选项卡处于活动状态并且您激活技术选项卡而不事先关闭位置选项卡时，所有

.treejs-nodes

都会获得

display: none

并且此后任何时候都不会被覆盖。

单击位置选项卡时，

display

样式可以更改为

block

。这将解决问题。下面是一个使用简短的

JS

脚本来实现它的小示例。

library(shiny)
library(shinydashboard)
library(shinyWidgets)

tree <- data.frame(
    Country = c("USA", "Canada", "UK", "France", "Germany"),
    City = c("New York", "Toronto", "London", "Paris", "Berlin"),
    Name = c("John", "Alice", "Michael", "Sophie", "David")
)

js <- "
$(document).ready(function() {

    $('a[href=\"#shiny-tab-location\"').on('click', function() {
        $('.treejs-nodes').css('display', 'block');
    });

})
"

ui <- dashboardPage(
    dashboardHeader(title = "Filters"),
    dashboardSidebar(
        # Increase the width of the sidebar panel
        width = 280,
        useShinyjs(),
        sidebarMenu(
            menuItem("By Location", tabName = "location", icon = icon("globe"),
                     fluidRow(
                         column(12, treeInput(inputId = "tree_loc",label = "Select facilities:",choices = create_tree(tree),selected = NULL,returnValue = "text",closeDepth = 0))
                     )),
            
            menuItem("By Technique", tabName = "technique", icon = icon("microscope"),
                     fluidRow(
                         # Adjust column sizing and spacing
                         column(3, actionBttn(inputId = "group1_btn", label = "EM", style = "jelly", color = "danger")),
                         column(3, actionBttn(inputId = "group2_btn", label = "LM", style = "jelly", color = "danger")),
                         column(3, actionBttn(inputId = "group3_btn", label = "Preclinical", style = "jelly", color = "danger"))
                         
                     ),
                     fluidRow(
                         column(5, actionBttn(inputId = "group4_btn", label = "Other modality", style = "jelly", color = "danger")),
                         column(5, actionBttn(inputId = "group5_btn", label = "Image Analysis", style = "jelly", color = "danger"))
                     ),
                     fluidRow(
                         column(12, actionBttn(inputId = "all_btn", label = "Show all/Hide all", style = "jelly", color = "danger")),
                     ))
        )
    ),
    
    dashboardBody(
        tags$head(tags$script(JS(js))),
        DTOutput("table"),
    )
)


######################
#SERVER###############
######################



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

shinyApp(ui, server)