r - NavbarMenu 中的 NavbarMenu in Shiny

Question

如果我在 Shiny 中使用以下 UI，我会大致得到我想要的输出，但它实际上不起作用，因为最低级别的 navbarMenu 显示它的顶级标签和指示它可扩展但无法注册子项的箭头。我的猜测是因为这仅被设计为顶级元素( 导航栏 菜单)。我的问题是，是否还有另一个元素可以执行所需的子菜单任务？无法在菜单项下分组将很快变得视觉效率低下。

shinyUI(navbarPage("My Application",
                   tabPanel("Component 1"),
                   tabPanel("Component 2"),
                   navbarMenu("More",
                              tabPanel("Sub-Component A"),
                              tabPanel("Sub-Component B"),
                              navbarMenu("Yet More",
                                         tabPanel("Subpart 1"),
                                         tabPanel("Subpart 2"))
                              )
                   )
)

Answer 1

很好的问题!
我不认为您可以使用其他元素，但您可以使用 JavaScript 使其工作。
我对 app.R 所做的唯一更改包括js文件，使用:includeScript("script.js") .真正的部分是脚本本身:我们定义了 2 个事件处理程序:
单击下拉菜单
下拉列表由 navbarMenu 创建.他们没有 tabPane连接到它们，所以我们需要的是通过切换下拉菜单(关闭时打开，或处于打开状态时关闭)来重新定义默认行为。
单击选项卡
单击选项卡时需要考虑 3 个子任务:
在选项卡内容中设置事件元素
我们需要显示相应的 tabPane被点击，以便查看内容。 tabPane与 class: active显示，所以首先，删除 active每个类(class) tabPane ，然后添加 active单击的选项卡的类。
在导航栏中设置事件元素
同样的故事，active选项卡在 navbar 中直观地表示带有较深的灰色。
关闭所有下拉菜单
单击 navbarMenu 中的特定选项卡后关闭所有下拉菜单可能是个好主意，否则它们将保持打开状态。
脚本.js

$(document).ready(function(){
  $('.dropdown').on('click', function(e){
    $(this).toggleClass('open');
    
    e.stopPropagation();
    e.preventDefault();
  });
  
  $('[data-toggle=tab]').on('click', function(e){
    let dv = ($(this).attr('data-value'));
    
    //Set active element in tabcontents
    $('.tab-pane').removeClass('active');
    $('.tab-pane[data-value="' + dv + '"]').addClass('active');
    
    //Set active element in navbar
    $('a[data-toggle=tab]').parent().removeClass('active');
    $('a[data-value="' + dv + '"]').parent().addClass("active");
    
    //Close the dropdowns
    $('.dropdown').removeClass('open');
    
    e.stopPropagation();
    e.preventDefault();
  });
});

您可以通过 runGist("https://gist.github.com/dgyurko/e1952c5ecbf9a1315b41b8d7ef1f7a8f") 快速试用。
确保在浏览器中进行测试，因为它在 RStudio 查看器中似乎无法正常工作!
演示