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个子任务：

在tabcontents中设置活动元素

我们需要显示已点击的相应tabPane，以便查看内容。显示tabPane class: active，首先，从每个active中删除tabPane类，然后为所点击的标签添加active类。

在导航栏中设置活动元素

同样的情况，active标签在navbar中直观地显示为深灰色。

关闭所有下拉列表

点击navbarMenu中的特定标签后关闭所有下拉列表可能是个好主意，否则它们会保持打开状态。

的script.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 Viewer中正常工作！

演示