隐藏手机上的Bootstrap子菜单

Question

我正在使用导航助手在Wordpress中使用bootstrap启用下拉菜单，一切正常。我想弄清楚的是有没有办法在手机上禁用下拉菜单，也许是使用媒体查询？

我想这样做的原因是因为有很多页面和一些链接在第三层上飞离移动屏幕。顶级导航无论如何都有到子菜单项的链接，所以在手机中我想只显示顶级项目，并禁用子菜单显示。

此外，我没有使用图标导航折叠，因为我不想在这个项目中使用它。

Answer 1

是的，可以通过媒体查询来完成。这个针对移动设备：

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
    .navigation {display:none;}
}

当然，您现在必须留意屏幕尺寸。一种替代解决方案是在JavaScript中，并检查userAgent：

if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android|BlackBerry|webOS|Windows Phone)/i)) {
    // I'm a mobile :-)
}