web-dev-qa-db-ja.com

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

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

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

彼らのgithubページに投稿された問題を見つけましたが、解決策はありません： https://github.com/Twitter/bootstrap/issues/7927

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

twitter-bootstraptwitterdrop-down-menuresponsive-design
15
maddo7

一時的な修正は追加することです

.dropdown-backdrop{
    position: static;
}

cssファイルに。

36
maddo7

これは私のために働きました：

$('.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に

9
Ryan

私にとって、それは私のスタイルに追加して機能しました：

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

マティアスとほぼ同じ答え、それが役に立てば幸いです。

2
Raúl Contreras

この問題を修正しました。

私のコードはここにあります

   <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>

CSSファイルに次のスタイルを追加します。

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

}
}

訪問： http://www.s4auto.co.za/

0
Binilsh K.B

通常の回答のいずれも、Androidでの問題を解決するようには見えませんでした。私たちはここで受け入れられた答えといくつかのjavascriptハックも試しました： Bootstrap Collapsed Menu Links Not Working On Mobile Devices and 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);

お役に立てば幸いです。

0
Julian Dormon

これを試して。それは私にとっては仕事です

 @media only screen and (max-width: 768px) {
    .dropdown-menu {
        position: absolute;
    }
 }
0
Chow927