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導航與移動懸停子菜單

回答

相關問題