使用shinyjs和flexdashboard动态显示/隐藏输入

Question

点击选项卡时，尝试更新 flexdashboard 中的 Sidebar，但无法使其正常运行。

---
title: "Test Sidebar"
output: 
  flexdashboard::flex_dashboard:
     orientation: rows
 runtime: shiny
---

```{r setup}
library(flexdashboard)
library(shiny)
library(shinyjs)
useShinyjs(rmd = TRUE)
```
Sidebar {.sidebar data-width=250}
=======================================================================

```{r}
div(id = "one", selectInput("input1",label= "Show Always",choices=c("a","b","c")))    
div(id = "two",selectInput("input2",label = "Show only on Tab 1", choices=c("d","e","f")))
```

<!-- Update the sidebar based on the tab chosen. Generated HTML code shown for tabs-->

Tab 1 <!-- <a href="#section-tab-1" aria-expanded="true" data-toggle="tab"> -->
=======================================================================
```{r}
useShinyjs(rmd = TRUE)
shinyjs::onclick("#section-tab-2",shinyjs::hide(id = "two"))
shinyjs::onclick("#section-tab-1",shinyjs::show(id = "two"))
```

Tab 2 <!-- <a href="#section-tab-2" aria-expanded="true" data-toggle="tab"> -->
=======================================================================
```{r}
useShinyjs(rmd = TRUE)
actionButton("hideSlider", "Hide Input Two")
observeEvent(input$hideSlider, {
     shinyjs::toggle(id = "two", anim = TRUE)
    })
```

与actionButton()和observerEvent()一起使用效果良好。欢迎任何建议。

- iboboboru

---

尝试在您的链接中添加一个“id”，并在onclick中调用该id。 - NicE

Answer 1

一些评论：

• 你只需要调用useShinyjs()一次，不需要在每个代码块中都调用它。

• onclick()需要元素的ID，而非选择器-即ID。这意味着您需要调用onclick("element")而不是onclick("#element")。

• 如果您查看仪表板生成的HTML，您会发现没有带有id“section-tab-2”的元素，因此您尝试的方法将无法工作。

• 在常规shiny应用程序中，当我使用tabsetPanel()时，我实现你想要做的事情的方式是使用所选选项卡的值。每当选择一个选项卡时，都会有一个输入值，该值给出了所选内容的值。我没有广泛使用flexdashboard，因此不确定是否有类似的方法可以在flexdashboard中获取所选选项卡的值。

- DeanAttali

---

感谢@daattali的建议。我已经搜索了一下，目前我认为使用flexdashboard解决这个问题并不是很简单。 - iboboboru