移动设备上的 TWBS 导航栏，禁用下拉菜单并改用链接

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>
...

在上面的 sn-p 中，您会看到我正在使用 <li> 上的 visible-xs-block 类以及指向您的替代页面的链接。这将确保这个元素是隐藏的，除了在移动设备上。在下拉列表中，我使用了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 方法。