Question

我正在尝试使用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;
});

提前感谢您提供的任何帮助！

Answer 1

好像你的问题可能与此问题重复：

Keep Bootstrap Dropdown Open When Clicked Off

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

在移动设备上使用悬停子菜单启动导航

1 个答案: