モバイルデバイスでドロップダウンメニューが動作しない

Question

最新のtwitterブートストラップ（2.3.2）では、モバイルデバイスのドロップダウンメニューに問題があるようです。

メニューを開いた後にドロップダウンメニュー項目をクリックすると、メニューは閉じられ、リンクはクリックされません。あなたがここにそのサンプルのページでこれを見ることができます ：http://twitter.github.io/bootstrap/examples/hero.html

を私は彼らのgithubのページに掲載問題が、ありません解決策を見つけた：https://github.com/twitter/bootstrap/issues/7927

誰もがそれを修正するためのトリックを知っていますか？

Answer 1

一時的な修正は、CSSファイルに

.dropdown-backdrop{ 
    position: static; 
} 

を追加することです。

Answer 2

これが私の仕事：

$('.dropdown-toggle').click(function(e) { 
    e.preventDefault(); 
    setTimeout($.proxy(function() { 
    if ('ontouchstart' in document.documentElement) { 
     $(this).siblings('.dropdown-backdrop').off().remove(); 
    } 
    }, this), 0); 
}); 

をrobdodsonを経由してgithubの

Answer 3

に私はこの問題を修正しました。

私のコードは、あなたのCSSのFIEで次のスタイルを追加します。ここで

<li class="dropdown custom open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> menu<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Sub menu</a></li> 
       <li><a href="#">Sub menu2</a></li> 
       </ul> 
      </li> 

です。

@media (max-width: 767px) { 
.dropdown.custom:hover .dropdown-menu { 
    visibility: visible; 
    display:block; 
    border-radius:0; 

} 
} 

ログイン：私にとってhttp://www.s4auto.co.za/

Answer 4

、それは私のスタイルに追加働い：マティアスとして

.dropdown-backdrop { 
    z-index:0; 
} 

はほとんど同じ答え、私はそれが役に立てば幸い。

Answer 5

通常の回答では、私たちの問題をAndroidで解決することはできませんでした。私たちはここにも受け入れ答えといくつかのjavascriptハックを試してみました： Bootstrap Collapsed Menu Links Not Working on Mobile Devices と http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/

を閉じるリンク親や壮大な親がdropdown-submenuクラス

を持っていなかった場合にのみ発生し、条件付きで clearMenus()と呼ばれていたところ最終的に私たちが発見しました

$(document) 
.on('click.dropdown.data-api', function (e) { 

    //fix start   
    var $parent = $(e.target).parent() 
    var $grandparent = $parent.parent() 

    if (!$parent.hasClass('dropdown-submenu') && !$grandparent.hasClass('dropdown-submenu')) {   
     clearMenus() 
    } 

    //clearMenus 

    //end fix 
}) 
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) 
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) 
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) 

}(window.jQuery); 

希望に役立ちます！