下拉菜单手机不工作答案

【问题标题】：Dropdown menu mobile phone not working下拉菜单手机不工作
【发布时间】：2018-02-25 10:15:18
【问题描述】：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
  </a>
  <ul class="dropdown-menu dropdown-messages">
    <li><a href="profile"><i class=ti-user></i>&nbsp; Profile</a></li>
    <li><a href="logoutGeneral"><i class=ti-layout-sidebar-left></i>&nbsp; Logout</a></li>
  </ul>
</div>

<ul class="dropdown-menu dropdown-messages"></ul>

我正在使用上面的类

<ul class="dropdown-menu dropdown-messages">
<li><a href="profile"><i class=ti-user></i>&nbsp; Profile</a></li>
<li><a href="logoutGeneral"><i class=ti-layout-sidebar-left></i>&nbsp; Logout</a></li>
</ul>

这个代码当然可以在计算机浏览器上正常工作，但是如果我尝试在我的手机上做同样的事情，它就不起作用，我该如何解决这个问题？

【问题讨论】：

“不工作”是什么意思？你能创建一个sn-p
当我点击下拉列表中的任何元素时，如果我使用手机，它不会重定向我，它只会关闭下拉列表
点击链接后在移动设备上会发生什么？通过更完整的 sn-p，您可能会获得更多帮助
请再试一次
试试什么？当我调整浏览器大小时，sn-p 工作正常。

标签： html css mobile twitter-bootstrap-3 drop-down-menu

【解决方案1】：

我前段时间也遇到过同样的问题。解决方法很简单，尝试改变 HTML 的层次结构。

只需在dropdown 上方插入dropdown-menu，如下所示：

<div class="dropdown">

  <ul class="dropdown-menu dropdown-messages">
    <li><a href="profile"><i class=ti-user></i>&nbsp; Profile</a></li>
    <li><a href="logoutGeneral"><i class=ti-layout-sidebar-left></i>&nbsp; Logout</a></li>
  </ul>
  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
  </a>

</div>

应该可以。

【讨论】：