通过单击actionLink折叠/展开仪表板中的框

Question

我在shiny中遇到了js函数的问题，因为我对js知之甚少，所以我需要一点帮助。

我喜欢用带有actionLink的盒子来折叠一个盒子和展开另一个盒子。我在@DeanAttali的How to manually collapse a box in shiny dashboard中找到了一个有用的代码片段，但这会导致切换，因为折叠/展开按钮是‘以编程方式’点击的。

下面是一个小示例，其中@DeanAttali提供的函数也不能正常工作，我不知道原因。

如果有人能帮助我或给我提示，我会很高兴的。

library(shiny)
library(shinydashboard)
library(shinyjs)

jscode <- "
shinyjs.toggleBox = function(boxid) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
};
shinyjs.collapseBox = function(boxid) {
$('#' + boxid).collapse('hide')};
shinyjs.expandBox = $function(boxid) {
$('#' + boxid).collapse('show')};
"

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = jscode),
    actionLink("toggleBoxes", "Toggle boxes"),
    box(id="box1", title = "box 1", width = 2,
        collapsible = TRUE,
        actionLink("openBox2", "open box 2")),
    box(id="box2", title = "box 2", width = 2,
        collapsible = TRUE, collapsed = TRUE,
        actionLink("openBox1", "open box 1"))
  )
)

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

  observeEvent(input$openBox2, {
    js$collapseBox("box1")
    js$expandBox("box2")
  })
  observeEvent(input$openBox1, {
    js$expandBox("box1")
    js$collapseBox("box2")
  })
  observeEvent(input$toggleBoxes, {
    js$toggleBox("box1")
    js$toggleBox("box2")
  })
}

shinyApp(ui = ui, server = server)

Answer 1

expandBox中有一个'$‘before函数，这就是整个JS代码不能工作的原因。当您删除“$”时，您可以切换这些框。下面的JS代码允许特定地展开/折叠这些框。我使用父类来了解框是否折叠(折叠包括'collapsed-box'，展开不包括)。

library(shiny)
library(shinydashboard)
library(shinyjs)

jscode <- "
shinyjs.toggleBox = function(boxid) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
};
shinyjs.expandBox = function(boxid) {
if (document.getElementById(boxid).parentElement.className.includes('collapsed-box')) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}};
shinyjs.collapseBox = function(boxid) {
if (!document.getElementById(boxid).parentElement.className.includes('collapsed-box')) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}}"

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = jscode),
    actionLink("toggleBoxes", "Toggle boxes"),
    box(id="box1", title = "box 1", width = 2,
        collapsible = TRUE,
        actionLink("openBox2", "open box 2")),
    box(id="box2", title = "box 2", width = 2,
        collapsible = TRUE, collapsed = TRUE,
        actionLink("openBox1", "open box 1"))
  )
)

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

  observeEvent(input$openBox2, {
    js$collapseBox("box1")
    js$expandBox("box2")
  })
  observeEvent(input$openBox1, {
    js$expandBox("box1")
    js$collapseBox("box2")
  })
  observeEvent(input$toggleBoxes, {
    js$toggleBox("box1")
    js$toggleBox("box2")
  })
}

shinyApp(ui = ui, server = server)