web-dev-qa-db-ja.com

Bootstrap v2ドロップダウンナビゲーションがモバイルブラウザで機能しない

Bootstrapモバイルデバイス（Bootstrap 2）のメニュードロップダウンに問題があります。同様の質問がされました here ドロップダウンボタンを使用しましたが、その答えはbootstrap=内の固有のバグ。これはアップデートで解決されました。同じ問題が発生しているようです。

折りたたみ可能なナビゲーションバーとドロップダウンがあり、すべてがデスクトップブラウザーで完全に機能します。ただし、モバイルでは、ドロップダウンをクリックするとドロップダウンが開きますが、ドロップダウンリンクをクリックすると、ドロップダウンが再び折りたたまれます。リンクに到達できません。さまざまなbootstrap=バージョンを試しましたが、これを修正することはできません。

 <header class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a href="#"><h1>Branding</h1></a>
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">Menu Item 1</a></li>
                    <li class="dropdown">                    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>      
                        <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Item 1</a></li>
                            <li><a href="#">Dropdown Item 2</a></li>
                            <li><a href="#">Dropdown Item 3</a></li>  
                            <li><a href="#">Dropdown Item 4</a></li>                           
                        </ul>
                    </li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</header>

コードを複製する例を次に示します（申し訳ありませんが、サイトを送信できません）： http://jsfiddle.net/yDjw8/1/

（問題はモバイルでのみ表示/複製できます— iOSを使用しています）

どんな助けでも大歓迎です。

javascripthtmlcssresponsive-designtwitter-bootstrap-2
30
Stuart

縮小されたbootstrap.min.jsファイルで、サブストリングを見つけます

"ontouchstart"

そしてそれを

"disable-ontouchstart"

同様のSO質問： モバイルデバイスでブートストラップの折りたたみメニューリンクが機能しない

59
Jollyra

バージョン2.3.2のこの修正を見つけました。

<script>
jQuery(document).ready(function($)  {
$("li.dropdown a").click(function(e){
    $(this).next('ul.dropdown-menu').css("display", "block");
    e.stopPropagation();
  });
}); </script>

私が構築した2つの独立したnavシステムで作業しました。

13
asbanks

BootStrap 3.1.1。私は多くの答えを試しました。ドロップダウンメニューはAndroidデバイスで動作しますが、iOSデバイスでは動作しません。問題の根本原因を見つけました。

iPhoneのSafariは、<a>および<input>要素。この文章をご覧ください iPhoneでイベント委任をクリックしてください 。

そのため、カスタムクリックの委任を追加する必要があります。次のコードは問題を解決します。

$('[data-toggle=dropdown]').each(function() {
 this.addEventListener('click', function() {}, false);
});
9
icemelon

これと同じ問題を解決しました：

1. js/bootstrap-dropdown.jsまたはその縮小版。

2.次の行または場所を探します：touchstart.dropdown.data-api

3.発生するのは4回だけです。このようなもの：

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

2番目と3番目の出現の間にこの新しい行を挿入する必要があります。

.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

4.ニュースのコードは次のようなものでなければなりません。

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

Bootstrap.jsの縮小バージョンに注意してください...新しい行をその正確な位置に連結する必要があります。

がんばろう！ :)

4
Massa

最新のBootstrap=ファイルをダウンロードし、サーバー上のbootstrap.jsとbootstrap.min.jsを新しいバージョンに置き換えることをお勧めします。

これで問題が解決しました。

4
Duncan Micahel-MacGregor

私はこの解決策をbootstrap git-hubフォーラムから見つけました。ドキュメントのスクリプトに1行だけのコードを含める必要があります。

$（ 'body'）。on（ 'touchstart.dropdown'、 '.dropdown-menu'、function（e）{e.stopPropagation（）;}）;

私の仕事!!!

4
Jigar Trivedi

これは問題なく動作するようです。クラス「open」はbootstrapで既に存在し、動作しているはずですが、何らかの理由で動作していません。このコードにより、強制的に実行されます。:)

    jQuery(document).ready(function($) {
    $("li.dropdown").click(function(e){
        $(this).toggleClass("open");
        });
    });
2
Kathryn

この修正はBootstrap 2.3.2、および@asbanksによる回答に基づいています（ https://stackoverflow.com/a/18107103/437019 ）。

Asbanksの答えに加えて、このスクリプトはドロップダウン内のリンクからJS呼び出しも伝播し、開いているドロップダウンは他の開いているドロップダウンを閉じます。

$(function() {
  return $("a.dropdown-toggle:not(.multiselect)").click(function(e) {
    $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
    $(this).next("ul.dropdown-menu").css("display", "block");
    return e.stopPropagation();
  });
});

$(document).on('click click.dropdown.data-api', function(e) {
  if (!$(e.target).closest('.dropdown, .multiselect-container').length) {
    return $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
  }
});
1
Yossi Shasho

ドロップダウンをクリックすると、<li class="dropdown">にopenクラスが追加され、<li class="dropdown open">が提供されます。ドロップダウンメニューまたは「メニュー項目2（ドロップダウン）」のリンクをクリックすると、openクラスが削除され、ドロップメニューが再び折りたたまれます。

以下のフィドルは、クリックイベントの伝播を停止する方法を示していますが、他の場所で問題を引き起こす可能性があります。また、ドロップダウンのアイテム＃1の伝播のみを防止しました。 jQueryを使用して、ドロップダウンのすべてのアイテムでこれを実行できます。

JSフィドル： http://jsfiddle.net/yDjw8/2/

1
Michael Freake

ブートストラップ-3.3.1を使用していますが、Android phonegapアプリで同じ問題が発生しています。

いくつかの試行錯誤の後、面白い回避策を見つけました。

// clueless hack here!!!! otherwise dropdown menu doesn't work
$('.dropdown-toggle').dropdown('toggle');
$('.dropdown-toggle').dropdown('toggle');
1
Miao ZhiCheng

うまく機能しているように見えますが、bootstrap=を誤って何かを台無しにした場合に備えて、ファイルを新しいコピーで置き換えてみてください。 。すべてのCSSファイルとJSファイルをインポートしますか？

1
user2360274

jquery-1.11.2、ブートストラップ-3.3.2：

$('#yourId').on('hidden.bs.dropdown', function (){
    $(this).click(function (event) {
       $('.dropdown-toggle').dropdown('toggle'); 
    });
});
0
Ferry

あなたが次のことをすれば、リンクは適切に機能すると思います

$(document).ready(function(){
            $('.youClass').click(function(){
                var menuItem = '<a class=" " href=" ">Log Out</a>';

                $('.anotherClass').append('<li class=".youClass">'+ menuItem +'</li>');

            });
        });
0
Edward Okech

_role="button"_を<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>に追加するとうまくいきました

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu Item 2 (Dropdown)<b class="caret"></b></a>

0
David DiBenedetto