如何使Bootstrap顶级菜单项在移动视图中可点击？

Question

更确切地说......

使用Bootstrap，我有一个包含子菜单项（the fiddle）的导航菜单。

然而，在移动视口中，它是...... 有点 ...链接太多了。

我希望能够完成两件事：

1. 隐藏子导航项目，然后......
2. 使顶级项目可点击（href解析为页面）

我一直在寻找引导网站周围找不到任何东西。

是否可以使用本机Bootstrap？

如果需要脚本，请提供一些“指针”。

谢谢！

Answer 1

您是否希望能够在移动设备上展开子菜单项？如果是这样，将顶级链接转换为直接URL可能是不切实际的 该场景的一些“指针”（使用jQuery，已经与Bootstrap插件集成）：

$('.nav .dropdown-menu').hide();  
$('.nav .dropdown-toggle').on('click', function() {
  $('.nav .dropdown-menu').toggle();
});

或者，如果您希望仅显示移动设备上的顶级链接，您可以将链接目标存储在自定义数据属性中并动态更改href值：

$('.nav .dropdown-menu').hide();
$('.nav .caret').hide();
$('.nav .dropdown-toggle').each(function() {
  $(this).attr('href', $(this).data('name'));
});

为每个链接添加“数据名称”属性。

<a href="#" data-name="page.php">Page</a>

祝你好运！