时间戳

首页 > 解决方案 > 闪亮的自定义悬停下拉菜单

javascript - 闪亮的自定义悬停下拉菜单

问题描述

在我的应用程序中，我希望有一个自定义 html 按钮作为下拉菜单。我想将选定的选项作为input$变量。然后应将其打印到控制台。使用我的代码，我能够检测到点击，而不是打印，例如Link 1它只返回一个空字符串。

library(shiny)

jscode <- '
$("#btn3").on("click", function(){
  Shiny.onInputChange("mydata", $("#btn3").text());
})
'


ui <- fluidPage(
  HTML( 
    '<style>
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>


<div class="dropdown" id = "btn1">
  <button class="dropbtn" id = "btn2">Dropdown</button>
  <div id = "btn3" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
         '), 

  singleton(tags$script(HTML(jscode)))
  
)

server = function(input, output, session) { 
  observeEvent(input$mydata, {
    
    print(paste("data is: ", input$mydata))
  })
}
runApp(list(ui = ui, server = server))

标签： javascripthtmlrshiny

解决方案

你可以做

jscode <- '
$("a").on("click", function(){
  Shiny.onInputChange("mydata", $(this).text());
})
'

但这也适用于<a>应用程序中的其他标签。所以你可以改为

jscode <- '
$(".dropdown-content a").on("click", function(){
  Shiny.onInputChange("mydata", $(this).text());
})
'

推荐阅读