Javascript shinyBS观察bsCollapsePanel的切换

我的问题是关于观察shinyBS的bsCollapsePanel中的标题切换和不切换事件

让我们考虑下面的应用程序作为一个例子：

library(shiny)
library(shinyBS)
server = function(input, output, session) {
    observeEvent(input$p1Button, ({
      updateCollapse(session, "collapseExample", open = "Panel 1")
    }))
    observeEvent(input$styleSelect, ({
      updateCollapse(session, "collapseExample", style = list("Panel 1" = input$styleSelect))
    }))
    output$randomNumber <- reactive(paste0('some random number'))
  }


ui = fluidPage(
  sidebarLayout(
    sidebarPanel(HTML("This button will open Panel 1 using <code>updateCollapse</code>."),
                 actionButton("p1Button", "Push Me!"),
                 selectInput("styleSelect", "Select style for Panel 1",
                             c("default", "primary", "danger", "warning", "info", "success"))
    ),
    mainPanel(
      bsCollapse(id = "collapseExample", open = "Panel 2",
                 bsCollapsePanel("Panel 1", "This is a panel with just text ",
                                 "and has the default style. You can change the style in ",
                                 "the sidebar.", style = "info")
      ),
      verbatimTextOutput('randomNumber')
    )
  )
)

app = shinyApp(ui = ui, server = server)

我希望应用程序能够在每次打开

bsCollapsePanel

时，通过单击

面板1

标题，在

逐字输出（'randomNumber'）

字段中打印一个随机数（使用R）

---

我在想，也许可以使用shinyjs软件包，但还没有找到这两个软件包一起使用的很多例子。

我不完全确定您想要什么，但这可能很接近。以下是补充内容：

• 添加了一个

  observeEvent

  来监视

  面板1

  标题
• 添加了一个

  reactiveValues

  来保存“随机数”
• 当按下

  面板1

  时，增加上述

  observeEvent

  处理程序中的值

代码如下：

library(shiny)
library(shinyBS)
server = function(input, output, session) {
  rv <- reactiveValues(number=0)
  observeEvent(input$p1Button, ({
    updateCollapse(session, "collapseExample", open = "Panel 1")
  }))
  observeEvent(input$styleSelect, ({
    updateCollapse(session, "collapseExample", style = list("Panel 1" = input$styleSelect))
  }))
  observeEvent(input$collapseExample, ({
    rv$number <- rv$number+1
  }))
  output$randomNumber <- reactive(rv$number)
}


ui = fluidPage(
  sidebarLayout(
    sidebarPanel(HTML("This button will open Panel 1 using <code>updateCollapse</code>."),
                 actionButton("p1Button", "Push Me!"),
                 selectInput("styleSelect", "Select style for Panel 1",
                           c("default", "primary", "danger", "warning", "info", "success"))
    ),
    mainPanel(
      bsCollapse(id = "collapseExample", open = "Panel 2",
                 bsCollapsePanel("Panel 1", "This is a panel with just text ",
                                 "and has the default style. You can change the style in ",
                                 "the sidebar.", style = "info")
      ),
      verbatimTextOutput('randomNumber')
    )
  )
)
shinyApp(ui = ui, server = server)

和屏幕截图：

---

好吧，迈克·怀斯比我快：） 如果出于某种原因，我的解决方案也有帮助，请让我知道，否则我将删除它

library(shiny)
library(shinyjs)
library(shinyBS)

ui = fluidPage(
  useShinyjs(),
  sidebarLayout(
    sidebarPanel(HTML("This button will open Panel1 using <code>updateCollapse</code>."),
                 actionButton("p1Button", "Push Me!"),
                 selectInput("styleSelect", "Select style for Panel1",
                             c("default", "primary", "danger", "warning", "info", "success"))
    ),
    mainPanel(
      bsCollapse(id = "collapseExample", open = "Panel 2",
                 bsCollapsePanel("Panel1", "This is a panel with just text ",
                                 "and has the default style. You can change the style in ",
                                 "the sidebar.", style = "info", id = "me23")
      ),
      verbatimTextOutput('randomNumber')
    )
  )
)

server = function(input, output, session) {
  observeEvent(input$p1Button, ({
    updateCollapse(session, "collapseExample", open = "Panel1")
  }))
  observeEvent(input$styleSelect, ({
    updateCollapse(session, "collapseExample", style = list("Panel1" = input$styleSelect))
  }))

  observe({
    runjs("function getAllElementsWithAttribute(attribute){
              var matchingElements = [];
              var allElements = document.getElementsByTagName('*');
              for (var i = 0, n = allElements.length; i < n; i++)
              {
              if (allElements[i].getAttribute(attribute) !== null)
              {
              // Element exists with attribute. Add to array.
              matchingElements.push(allElements[i]);
              }
              }
              return matchingElements;
              };
              ahref = getAllElementsWithAttribute('data-toggle');
              ahref[0].onclick = function() { 
                var nmbr = Math.random();
                Shiny.onInputChange('randomNumber', nmbr);
              };
          ")
  })
  output$randomNumber <- reactive(paste0(input$randomNumber))
}




shinyApp(ui = ui, server = server)

您可以在此处找到Javascript代码：

---

我认为这是一段有用的代码，尽管对于这个特定场景来说可能有些过分。从长远来看，可能更适用于他的意图。我同意我也尝试过首先使用

input$collapseeexample

，但不知何故，我似乎不得不错过smthg，因为它对我不起作用+1表示您更优雅的解决方案：）。同样，表示您更有趣的解决方案。事实上，研究它，总有一天会用到它的。绝妙的解决方案。我喜欢shinyjs和shinyBS的组合。肯定会对我有用。优雅的解决方案。即使在运行它之后，我意识到我想在关闭面板后更改数字。但是，由于我在问题中只提到了打开专家组，而你是第一个回答的人，所以我有理由接受它。我将不胜感激。如果你有时间的话，我相信有人会回答你的问题，包括我在内。