javascript - Bootstrap : hide drop down menu when mobile and link to parent

Question

我开始使用 bootstrap 时遇到了一个问题。我希望在桌面 View 中有一个下拉菜单，但希望在移动 View 中将其隐藏。

我有 <a href=""> (现在是 www.example.com)为父项设置。因为它是用来显示下 zipper 接的，所以当我在桌面上时这很好。

我需要的是能够在移动设备中隐藏下拉菜单并让用户访问第一项的链接。因此整<ul>会被隐藏。我尝试使用 .hidden-xs 类，但它只会隐藏 <ul>并且不使用提供的 href。

我是否应该简单地创建两个不同的菜单，一个用于较大的设备，一个用于移动设备？

提前致谢

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="http://www.example.com">
    Item 1
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
  </ul>
</div>

Answer 1

我会使用 IF 条件进行 javascript 检测，以查看您是否在移动设备上，并根据返回的内容显示它。

这是一个网站，它显示了多种方法来检测您是否在使用移动浏览器或不包括 javascript 浏览器。我可以显示 javascript 代码，但它非常长且晦涩难懂。当然，其中任何一个都可以，具体取决于您使用的技术堆栈。

http://detectmobilebrowsers.com/