web-dev-qa-db-ja.com

Bootstrap 3 iPadでドロップダウンが機能しない

私がテストしたすべてのブラウザで動作するシンプルなBootstrap 3ドロップダウン（Chrome、FF、IE、Chrome））がありますが、 SafariまたはChrome iPad（ios 7.04）では動作しません。

これは、Bootstrap 2を扱う他のいくつかの投稿で示唆されているように、ontouchstartの問題だと思いましたが、ローカルファイルで試しましたが成功しませんでした： Bootstrap Collapsedモバイルデバイスで機能しないメニューリンク

また、現在CDNからそれをプルしているため、元のJavaScriptファイルを変更する必要があるソリューションも必要ありません。

テスト用にここに簡単なスニペットを作成しました： https://www.bootply.com/Bdzlt3G36C

将来リンクが切れた場合に備えて、ブートプライにある元のコードは次のとおりです。

<div class="col-sm-5 col-offset-2 top-buffer">
  <div class="dropdown">
      <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown">
        Action
    </a>
    <ul class=" dropdown-menu" =""="" role="menu" aria-labelledby="ddaction">
      <li role="presentation"><a class="dropdown-toggle" id="ddAction" data-toggle="dropdown>
        Action
    </a>
    <ul class=" dropdown-menu"="" role="menu" aria-labelledby="ddaction">
        </a><a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
      </li>

  </ul></div>
</div>
javascriptioscsstwitter-bootstrap-3
29
JeffR

私はそれを考え出した。アンカータグにhref = "＃"がありませんでした。他のブラウザでは正常に動作していましたが、IOSでchromeまたはsafariでは動作していません。現在は正常に動作します。興味のある人向けの最終コードは次のとおりです。

  <div class="dropdown">
      <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown" href="#">
        Action
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="ddaction">
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
      </li>
    </ul>
  </div>

そして、ここで動作するサンプル： http://www.bootply.com/104147

70
JeffR

iOSでテストしたサファリバージョンは、z-indexの初期を正しく解釈しません。ドロップダウンメニューのZインデックスを増やします。アイテムをクリックする代わりに、アイテムは非表示になり、メニューが閉じます。 Safariを機能させるには、bootstrap z-index：initial。

.dropdown-menu {
  z-index: 25000 !important;
}
6
Joseph Olstad

また、clickableと呼ばれるタグにクラスを追加することもできます。これはbootstrapクラスです。cssカーソル：ポインターを設定します。

<a class="clickable"></a>
2
hitgirl1221

私はちょうどこの問題を抱えていました-Bootstrap 3 navbarドロップダウンメニューはiPad mini 2で開かれていませんでした（ただし、iPhone 7およびさまざまなデスクトップ/ラップトップで動作しました）。iPadで直接デバッグした後） 、私は問題がjs関数内で「var」ではなく「let」を使用していることを発見しました。「let」を「var」に切り替えると、すべてがうまくいきました。廃止された機能）は、他の誰かの修正にもなります！

1
murph

iPhone/iPad WebKitでは、ブートストラップターゲットの切り替えが機能していませんでした。ドロップダウンコンテナーをクリックすると、クラスを手動で切り替えることになりました

  $scope.showDropdown = function(dropdownManuId) {
    var element = document.getElementById(dropdownManuId);
    if( element.classList.contains("show") ) {
      element.classList.remove("show");
    } else {
      element.classList.add("show");
      element.focus();
      element.scrollIntoView();
    }
  };
0
Delorean