下拉菜單誰有下拉的內部（引導 - 導航欄）的平板電腦

Question

我試圖做一個下拉菜單裏面的導航欄，但在這個，我不想在裏面的下拉菜單。但是當我點擊它時，菜單關閉。我不想阻止這個功能，當我點擊它時會消失，因爲我認爲這是因爲它無法工作。我在https://github.com/twitter/bootstrap/pull/3383上看到有關停止傳播的事情，但我不知道我可以在哪裏聲明這一點，而且它不是一個公式。

編輯：我不能使用li class =「dropdown-submenu」，因爲當你在手機或平板電腦上時，菜單在你觸摸鏈接時關閉。

有我的代碼：

<div class="bs-docs-example"> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
      <a class="brand" href="/app/alink">Title</a> 
      <div class="nav-collapse collapse navbar-responsive-collapse"> 
       <ul class="nav"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Article A<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="/app/alink">Title Article 1-A</a></li> 
          <li><a href="/app/alink">Title Article 2-A</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">More ...<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Article B<b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li><a href="/app/alink">article 1-B</a></li> 
           </ul> 
          </li> 
          <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Article C<b class="caret"></b></a></li> 
          <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Article D<b class="caret"></b></a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

我找到了另一種解決辦法。我補充說，我的代碼之後：

<script type="text/javascript"> 
$('.dropdown-menu').click(function(event){ 
    event.stopPropagation(); 
}); 
</script> 

下拉不能工作的這個解決方案，所以我用「下拉菜單，子菜單」來解決這個問題（感謝@Schmalzy爲該）。所以當我觸摸一個鏈接時，子菜單打開。沒有上述代碼，子菜單無法在平板電腦上正常工作。

Answer 2

您可以使用bootstrap3的響應下拉菜單。

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="./" class="navbar-brand">Bootstrap</a> 
    </div> 
    <nav class="navbar-collapse bs-navbar-collapse collapse" role="navigation" style="height: 1px;"> 
     <ul class="nav navbar-nav"> 
     <li> 
      <a href="./getting-started">Getting started</a> 
     </li> 
     <li> 
      <a href="./css">CSS</a> 
     </li> 
     <li> 
      <a href="./components">Components</a> 
     </li> 
     <li> 
      <a href="./javascript">JavaScript</a> 
     </li> 
     <li> 
      <a href="./customize">Customize</a> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</header> 

Answer 3

的問題是在引導V2.3.2，你可以在這個鏈接看到 http://getbootstrap.com/2.3.2/examples/carousel.html

你可以升級你引導到3版本或使用這種風格來解決這個問題

/*Fix navbar dropdown collapsed on mobile devices*/ 
.dropdown-backdrop { 
    position: static; 
} 

感謝http://yogarelax.harpoonmysite.com/