下拉菜单手机无法正常工作

时间:2017-09-16 10:22:34

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

<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>

这个代码当然适用于计算机浏览器,但如果我尝试用我的手机做同样的事情它不起作用,我该如何解决这个问题呢?

1 个答案:

答案 0 :(得分:0)

我前段时间遇到了同样的问题。解决方案很简单,尝试更改HTML的层次结构。

只需在dropdown-menu上方插入dropdown,就像这样:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

应该工作。