移动设备上带有悬停子菜单的引导导航答案

【问题标题】：Bootstrap nav with hover submenu on mobile移动设备上带有悬停子菜单的引导导航
【发布时间】：2014-11-19 01:51:09
【问题描述】：

我正在尝试使用 Bootstrap 3.2.0 让我的导航子菜单在移动设备上运行。

目前，子菜单在桌面浏览器上运行良好，但在移动设备上却不行。当我单击链接以在移动设备上打开下拉菜单时，它会打开下拉菜单，当我单击其他任何地方时，下拉菜单会关闭。所以问题是当我点击带有子菜单的链接时，整个下拉菜单都会关闭，我看不到任何需要查看的链接。

我尝试了一些解决方法，但似乎没有任何效果。

任何帮助将不胜感激。如果我说的有什么不清楚的地方，请随时提问。

这是 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;
});

提前感谢您的任何帮助！

【问题讨论】：

Bootstrap 没有在他们的菜单中使用 :hover 因为触摸设备，没有办法 :hover 在触摸设备上。将您的子菜单更改为点击。 bootply.com/97919 - 就是一个例子
好吧，你可以在大多数触控设备上触发 :hover，但所涉及的 UX 不是很好。
@Christina 感谢您的链接。我现在正在尝试实现它，看起来它非常接近工作。我仍然存在的唯一问题是当我单击链接打开子菜单时，“打开”类已从原始下拉列表中删除。 'open' 类被添加到子菜单中，但从下拉列表中删除，所以我仍然看不到链接。有什么想法吗？
尽你所能，做jsBin或者Fiddle，然后再做一个问题。我猜不出有什么问题。另外，阅读这个线程，有一个脚本可能会有所帮助：github.com/twbs/bootstrap/issues/3637
别在意那个 github 线程，它是关于别的东西的。制作一个小提琴或垃圾箱，然后在 SO 上用另一个问题重新提问

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

似乎您的问题可能与此处的问题重复：

Keep Bootstrap Dropdown Open When Clicked Off

我链接到的问题并未说明它仅在移动设备上，但希望提供的解决方案也适用于您的问题。祝你好运！

【讨论】：