移动设备上的TWBS Navbar，禁用下拉菜单并改为使用链接

Question

当在iPhone和类似设备尺寸上查看时，是否有办法禁用Twitter Bootstrap 3导航栏中的下拉菜单，然后将其替换为指向另一个屏幕的链接。

菜单占用了大量空间。在桌面（甚至平板电脑）上这没关系。在手机上，我希望它能带你到另一个页面并完全禁用下拉菜单。

Answer 1

CSS方法

我会为此使用响应式类。为隐藏元素添加额外标记可能并不理想，但它是最简单，最可靠的方法，不需要Javascript。

demo

...
<li class="visible-xs-block"><a href="#"><span class="glyphicon glyphicon-user" aria-label="My profile"></span> My Profile</a></li>
<li class="dropdown hidden-xs">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> My Profile <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#"><span class="glyphicon glyphicon-signal"></span> Statistics</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-certificate"></span> Certificates</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-star"></span> Favorites</a></li>
        <li class="divider"></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
    </ul>
</li>
...

在上面的代码段中，您会看到我正在使用visible-xs-block上的<li>课程以及指向您的替代页面的链接。这将确保隐藏此元素，但移动设备除外。在下拉列表中，我使用了hidden-xs类，它只会隐藏移动设备上的下拉列表。

---

Javascript方法

您可以使用@cvrebert建议的Javascript执行此操作，如果您不必担心支持IE8或IE9，您可以使用matchMedia轻松完成此操作。

JS（不支持IE8 / 9）

if (window.matchMedia("(max-width: 768px)").matches) {
  /* the view port is less than 768 pixels wide */
  /* hide your dropdown and display your link */
} else {
  /* the view port is at least 768 pixels wide */
  /* show your dropdown and hide your link */
}

如果你想要一个Javascript解决方案并且需要支持IE8 / IE9，那就有点复杂，因为你必须监视窗口调整大小事件。要有效地执行此操作，您可能需要去抖或使用超时。

同样，对我来说，最好的方法是上面的CSS方法。