很好的问题!
我认为没有其他元素可以使用,但您可以使用 JavaScript 来使其工作。
我所做的唯一改变app.R
包含 js 文件,使用:includeScript("script.js")
。真正的部分是脚本本身:我们定义了 2 个事件处理程序:
单击下拉菜单
下拉列表是由创建的navbarMenu
。他们没有tabPane
连接到它们,因此我们需要的只是通过切换下拉列表(关闭时打开,或处于打开状态时关闭)来重新定义默认行为。
单击选项卡
单击选项卡时需要考虑 3 个子任务:
在选项卡内容中设置活动元素
我们需要展示适当的tabPane
单击该按钮以查看内容。这tabPane
with a class: active
如图所示,所以首先删除active
类从每个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 查看器中似乎无法正常工作!
Demo