Javascript 使用（r）introjs自动突出显示侧边栏菜单未正确调整

我正在使用JS扩展名

rintrojs

，并扩展了它的功能，以便在侧边栏上突出显示某个侧边栏项时展开菜单侧边栏，而以前展开的侧边栏子菜单将折叠。只要“引入”侧边栏菜单，它就会扩展

一切正常，除了突出显示本身突出显示了如果前一个菜单没有折叠的话，菜单应该位于的区域。

我尝试了一些技巧，比如当达到某一步时立即进入下一步，但没有成功。它看起来像是在触发JS之前确定的高亮显示区域

# shiny
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
library(rintrojs)

# tidyverse
library(dplyr)
library(tibble)
library(stringi)


# allow IDs to be added to the menu item
menuItemID <- function (text, id = NULL, ..., icon = NULL, badgeLabel = NULL, badgeColor = "green", 
                       tabName = NULL, href = NULL, newtab = TRUE, selected = NULL, 
                       expandedName = as.character(gsub("[[:space:]]", "", text)), 
                       startExpanded = FALSE) 
{
  subItems <- list(...)
  if (!is.null(icon)) 
    shinydashboard:::tagAssert(icon, type = "i")
  if (!is.null(href) + !is.null(tabName) + (length(subItems) > 
                                            0) != 1) {
    stop("Must have either href, tabName, or sub-items (contained in ...).")
  }
  if (!is.null(badgeLabel) && length(subItems) != 0) {
    stop("Can't have both badge and subItems")
  }
  shinydashboard:::validateColor(badgeColor)
  isTabItem <- FALSE
  target <- NULL
  if (!is.null(tabName)) {
    shinydashboard:::validateTabName(tabName)
    isTabItem <- TRUE
    href <- paste0("#shiny-tab-", tabName)
  }
  else if (is.null(href)) {
    href <- "#"
  }
  else {
    if (newtab) 
      target <- "_blank"
  }
  if (!is.null(badgeLabel)) {
    badgeTag <- tags$small(class = paste0("badge pull-right bg-", 
                                          badgeColor), badgeLabel)
  }
  else {
    badgeTag <- NULL
  }
  if (length(subItems) == 0) {
    return(tags$li(id = id, a(href = href, `data-toggle` = if (isTabItem) "tab",
                              `data-value` = if (!is.null(tabName)) tabName, `data-start-selected` = if (isTRUE(selected)) 1 else NULL, 
                              target = target, icon, span(text), badgeTag)))
  }
  default <- if (startExpanded) 
    expandedName
  else ""
  dataExpanded <- shinydashboard:::`%OR%`(shiny::restoreInput(id = "sidebarItemExpanded", 
                                                              default), "")
  isExpanded <- nzchar(dataExpanded) && (dataExpanded == expandedName)
  tags$li(id = id, class = "treeview", a(href = href, icon, span(text), 
                                         shiny::icon("angle-left", class = "pull-right")), do.call(tags$ul, 
                                                                                                   c(class = paste0("treeview-menu", if (isExpanded) " menu-open" else ""), 
                                                                                                     style = paste0("display: ", if (isExpanded) "block;" else "none;"), 
                                                                                                     `data-expanded` = expandedName, subItems)))
}

ui <- shinyUI(
  dashboardPagePlus(
    
    ## Header ====
    header = dashboardHeaderPlus(
      
      enable_rightsidebar = FALSE,
      tags$li(class = "dropdown",
                  actionButton("intro_btn", "Get Started")
              )
      ),
    
    ## Sidebar ====
    sidebar = dashboardSidebar(
      fluidPage(fluidRow(sidebarMenu(
        id = "sidebarmenu",
        menuItemID(
          id = "driv_sidebar",
          text = "Section 1",
          tabName = "driv_sidebar",
          icon = icon("chevron-right", lib = "font-awesome"),
          startExpanded = TRUE,
          div(id = "env-intro", menuSubItem("Tab A", tabName = "env_tab", icon = icon("chevron-right", lib = "font-awesome"))),
          div(id = "vic-intro", menuSubItem("Tab B", tabName = "vic_tab", icon = icon("chevron-right", lib = "font-awesome"))),
          div(id = "gen-intro", menuSubItem("Tab C", tabName = "gen_tab", icon = icon("chevron-right", lib = "font-awesome"))),
          div(id = "pow-intro", menuSubItem("Tab D", tabName = "pow_tab", icon = icon("chevron-right", lib = "font-awesome")))
        ),
        menuItemID(
          id = "hint_sidebar",
          text = "Section 2",
          tabName = "hint_sidebar",
          icon = icon("chevron-right", lib = "font-awesome"),
          div(id = "apps-intro",menuSubItem("Tab X", tabName = "apps_tab", icon = icon("chevron-right", lib = "font-awesome"))),
          div(id = "ent-intro",menuSubItem("Tab Y", tabName = "ent_tab", icon = icon("chevron-right", lib = "font-awesome")))
        )
      )))
      
    ),
    
    ## Body ====
    body = dashboardBody(
      
      id = "dashbody",
      useShinyjs(),
      introjsUI(),
      # SAVE THE JS in the same folder as the file app.R as switch_sidebar.js !!
      tags$head(includeScript("switch_sidebar.js")),
      tags$head(
        tabItems(
          
        )
      )
    )
    
  )
)


server <- shinyServer(function(input, output, session) {
  
  # Intro steps ----------------------------------------------------------------
  intro_guide  <- tibble(step = 1:6,
                         intro = c(stri_c(stri_rand_strings(8, 7), collapse = " "), 
                                   stri_c(stri_rand_strings(8, 7), collapse = " "), 
                                   stri_c(stri_rand_strings(8, 7), collapse = " "), 
                                   stri_c(stri_rand_strings(8, 7), collapse = " "), 
                                   stri_c(stri_rand_strings(8, 7), collapse = " "), 
                                   stri_c(stri_rand_strings(8, 7), collapse = " ")), 
                         element = c("#driv_sidebar", "#gen-intro",
                                     "#pow-intro", "#hint_sidebar", "#apps-intro", "#ent-intro"),
                         position = c("auto", "auto", "auto", "auto", "auto", "auto"))
  
  # INTRO ----------------------------------------------------------------------
  # https://shiny.rstudio.com/articles/js-introjs.html
  observeEvent(input$intro_btn, {
    
    introjs(session = session,
            options = list(steps = intro_guide),
            events = list(onbeforechange = I("rintrojs.callback.switchSidebars(targetElement)")))
    
  })
})


shiny::shinyApp(ui, server)

#闪亮
图书馆（闪亮）
图书馆（shinydashboard）
图书馆（shinydashboardPlus）
图书馆（shinyjs）
图书馆（rintrojs）
#三角帆
图书馆（dplyr）
图书馆（tibble）
图书馆（stringi）
#允许将ID添加到菜单项
梅努特米德