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

Question

更准确地说……

使用 Bootstrap，我有一个带有子菜单项的导航菜单 (the fiddle)。

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

我希望能够完成两件事：

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

我一直在寻找引导站点，但找不到任何东西。

是否可以使用原生 Bootstrap？

如果需要脚本，请提供几个“指针”。

谢谢！

Answer 1

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

$('.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>

祝你好运！