【问题标题】:TWBS Navbar on mobile device, disable dropdown menu and use link instead移动设备上的 TWBS 导航栏,禁用下拉菜单并改用链接
【发布时间】:2015-02-12 21:02:22
【问题描述】:

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

菜单占用大量空间。在台式机(甚至平板电脑)上,这无关紧要。在手机上,我希望它带您到不同的页面并完全禁用下拉菜单。

【问题讨论】:

  • 是的,这可以通过一些自定义 JavaScript 检查视口大小并相应地更改 DOM。

标签: ios mobile drop-down-menu twitter-bootstrap-3 navbar


【解决方案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 中,您会看到我正在使用 &lt;li&gt; 上的 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 方法。

【讨论】:

  • 我在上一个问题中指出,您故意阻止移动设备上的导航栏切换行为。这是一个没有切换的更新小提琴:jsfiddle.net/jme11/Lxutd5un/3
  • 太好了,谢谢。快速说明一下,当页面宽度减小时,nabber 的高度会略有增加,有没有办法解决这个问题?或调试它,以便我知道是什么原因造成的。您可以在您提供的 Fiddle 中看到效果。再次感谢您,这非常符合我的要求。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-07-16
  • 2019-04-16
  • 2020-03-25
  • 2016-11-25
  • 2013-05-16
  • 2015-05-05
相关资源
最近更新 更多