ios - 移动设备上的 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>
...

在上面的代码片段中，您会看到我正在使用 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，这会有点复杂，因为您必须监 window 口调整大小事件。要有效地执行此操作，您可能需要去抖动或使用超时。

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