2017-09-16 141 views
0

下拉菜单中的手机不能正常工作

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

当然此代码对计算机的浏览器正常,但如果我尝试做与我的手机一样,它不工作,我该如何解决这个问题?

+0

“不工作”是什么意思?你可以创建一个片段 – sol

+0

当我点击下拉列表中的任何元素,它可以重定向我,如果我使用我的手机,它只会关闭下拉列表 –

+0

当你点击链接时在移动设备上会发生什么?你可能会得到更多的帮助更完整的片段 – sol

回答

0

前段时间我有同样的问题。解决方案很简单,试着改变HTML的层次结构。

只需插入dropdown-menu上述dropdown这样的:

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

应该工作。