Bootstrap导航与移动悬停子菜单

我想让我的导航子菜单与移动Bootstrap 3.2.0工作。Bootstrap导航与移动悬停子菜单

现在，子菜单在桌面浏览器上正常工作，但在移动设备上不起作用。当我点击一个链接打开移动设备上的下拉菜单时，它会打开下拉菜单，当我点击其他地方时，下拉菜单关闭。所以问题是当我点击一个子菜单链接整个下拉菜单关闭，我看不到任何需要看到的链接。

我试过几个解决方法，但似乎没有工作。

任何帮助将不胜感激。如果我的意思不清楚，请随时询问。

下面是HTML和CSS（用于悬停下拉）

HTML：

<ul class="nav navbar-nav"> 
    <li class='GeneralInfo dropdown'> 
     <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-tasks navDown'></span>General Info</a> 
     <ul class='dropdown-menu' role='menu'> 
      <li><a href='/email_list.php'>Employee Directory</a></li> 
      <li><a href='/docs.php'>Documents</a></li> 
      <li><a href='/ftp.php'>FTP</a></li> 
      <li><a href='/manage/'>Manage</a></li> 
      <li><a href='/flyspray'>Bug/Feature Tracking</a></li> 
     </ul> 
    </li> 
    <li class='JobInfo dropdown'> 
     <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-info-sign navDown'></span>Job Info</a> 
     <ul class='dropdown-menu' role='menu'> 
      <li><a href='/job/list'>Job List</a></li> 
      <li><a href='/files_required.php'>Files Rqrd</a></li> 
      <li><a href='/incoming_list.php'>Incoming Data List</a></li> 
      <li class='dropdown-submenu'> 
       <a tabindex='-1' href='javascript:void(0)'>Signoffs</a> 
       <ul class='dropdown-menu signoffDropdown'> 
        <li><a href='signoff.php?dep=Workorders'>Workorders</a></li> 
        <li><a href='signoff.php?dep=CNC'>CNC</a></li> 
       </ul> 
      </li> 
      <li><a href='/leader_list2.php'>Leader List</a></li> 
      <li><a href='/milestones'>Milestone/Timelines</a></li> 
     </ul> 
    </li> 
    <li class='QIRInfo dropdown'> 
     <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-eye-open navDown'></span>QIR Info</a> 
     <ul class='dropdown-menu' role='menu'> 
      <li><a href='/open_qir.php'>Open QIRs</a></li> 
      <li><a href='/qir'>Search QIR</a></li> 
     </ul> 
    </li> 
</ul>

子菜单CSS：

.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 

.dropdown-submenu:hover>.dropdown-menu{ 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #333; 
    margin-top: 5px; 
} 

.dropdown-submenu>a:hover:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu > ul > li { 
    font-size: 1.15em; 
} 

@media (max-width:768px){ 
    .dropdown-submenu > ul > li { 
     margin-left: 15px; 
    } 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
}

JS：

//SIGNOFFS DROPDOWN 
$('.dropdown-toggle').on('hide.bs.dropdown', function() { 
    return false; 
});

谢谢提前任何和所有的帮助！

来源

2014-09-24 noelllll

引导程序不使用：由于触摸设备而将鼠标悬停在其菜单中，因此无法将鼠标悬停在触摸设备上。将您的子菜单更改为点击。 http://www.bootply.com/97919 - 就是一个例子 – Christina 2014-09-24 17:10:27

嗯，你可以触发：悬停在大多数触摸设备上，但涉及的用户体验并不好。 – cvrebert 2014-09-24 17:14:18

@Christina感谢您的链接。我试图现在实现它，它看起来非常接近工作。唯一的问题是当我点击链接打开子菜单时，“打开”类将从原始下拉列表中删除。 '打开'类被添加到子菜单，但从下拉菜单中删除，所以我仍然无法看到链接。有任何想法吗？ – noelllll 2014-09-25 17:06:00

好像您的问题可能是一个重复的这一个位置：

Keep Bootstrap Dropdown Open When Clicked Off

我链接到没有说明，这只是在移动设备上的问题，但希望所提供的解决方案可以应用对你的问题也是如此。祝你好运！

来源

2014-09-24 15:38:46 khilley

Bootstrap导航与移动悬停子菜单

回答

相关问题