Bootstrap：移动时隐藏下拉菜单并链接到父级

Question

我开始使用引导程序并遇到问题。我希望在桌面视图中有一个下拉菜单，但希望在移动视图中隐藏它。

我为父项设置了<a href="">（现在是 www.example.com）。由于它用于显示下拉链接，因此链接无处可去，当我在桌面上时这很好。

我需要的是能够在移动设备中隐藏下拉菜单并让用户访问第一项的链接。因此整个<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/

Answer 2

您可以使用 CSS 来执行此操作，但可能效率不高，具体取决于您的最终实现。

您可以在所需的媒体查询处将dropdown-menu 显示属性更改为inline-block/block（例如768px），然后在添加hidden-xs 的同时为dropdown-menu li 的第一个子级以外的所有子级设置display: none到下拉按钮也可以隐藏它。

查看完整页面的工作示例，然后缩小浏览器窗口以查看更改。

@media (max-width: 767px) {
  .btn-group-hidden .dropdown-menu {
    display: inline-block;
    box-shadow: none;
    border: none;
    position: relative;
  }
  .btn-group-hidden .dropdown-menu li:not(:first-child) {
    display: none;
  }
  /**For Styling Only**/
  .btn-group-hidden .dropdown-menu > li:first-child {
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: center;
    width: auto;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3 class="alert alert-info text-center">Some Text</h3>

  <div class="row">
    <div class="col-sm-4">
      <div class="btn-group btn-group-hidden">
        <button type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Item 1 <span class="caret"></span>

        </button>
        <ul class="dropdown-menu">
          <li><a href="https://www.google.com" target="_blank">Choice1</a>

          </li>
          <li><a href="#">Choice2</a>

          </li>
          <li><a href="#">Choice3</a>

          </li>
        </ul>
      </div>
      <div class="btn-group btn-group-hidden">
        <button type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Item 1 <span class="caret"></span>

        </button>
        <ul class="dropdown-menu">
          <li><a href="https://www.google.com" target="_blank">Choice1</a>

          </li>
          <li><a href="#">Choice2</a>

          </li>
          <li><a href="#">Choice3</a>

          </li>
        </ul>
      </div>
    </div>
    <div class="col-sm-8">
      <div class="well well-sm">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
        Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
  </div>