如何使用Bootstrap制作辅助导航栏，条件是第一个？

Question

我刚开始尝试使用Bootstrap。这就是我想要做的事情：

• 我在顶部有一个主导航栏，我使用Bootstrap的导航栏功能自定义样式。主要链接，如家庭，关于我们，联系等...
• 对于主导航栏中的某些选项卡，我希望在主导航栏下方生成辅助导航栏，并显示“子链接”（例如，关于我们可能有不同的历史记录，新闻等页面...）

有没有办法使用Bootstrap来做到这一点？我看到的唯一基本功能是有两个相同样式的导航栏，它们总是存在。

可在此处找到一个很好的示例：http://newrelic.com/about，如果您单击顶部的“关于”链接，则会生成辅助导航栏。

Answer 1

只需给辅助导航栏一个类（例如'no-show'），它将display属性设置为none：

.no-show { display: none; }

然后，当点击about链接时，切换类：

$('#about').click(function(e) {
    $('#nav_secondary').toggleClass('no-show');
});

这是一个working Fiddle。你必须添加一些css来设置样式并按照你想要的方式定位导航栏。