web-dev-qa-db-ja.com

bootstrap 3アコーディオンの崩壊はiPhoneで動作しません

これらの「アコーディオンサブメニュー」は、chromeおよびfirefoxで機能しますが、iphoneでは機能しません。

小さな画面に「offcanvas」ナビゲーションメニューを含むサイトを構築しました。ユーザーが「ホットドッグボタン」をクリックすると、ナビゲーションメニューが左から画面にスライドします。

一部のナビゲーション要素にはサブメニューが含まれています。それらには、ブートストラップのアコーディオンマークアップを使用しました。ユーザーが矢印をクリックすると、「サブメニュー」が展開します。

enter image description here

問題

私はLinuxでchrome。を使用して開発します。このメカニズムはchrome、firefox、および手に入れることができるすべてのブラウザで完璧に機能します個人用Android電話。 responsinator.com でも動作します。ただし、SafariもiPhoneも持っていないので、この機能をiPhoneで直接テストします。iPhoneエミュレータの取得に取り組んでいます...

それまで、他の人々はこれをiPhoneで見てきましたが、「サブメニュー」はまったく機能しないと言われています。ユーザーが矢印をクリックしても、何も起こりません...

「サブメニュー」を含む「メニュー項目」の抜粋を次に示します。「data-toggle」および「data-target」属性を使用していることに注意してください。

_<div class="panel panel-default">
    <!-- The "Trigger" -->
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="view.php?cms_nav_id=1" name="about">
                About</a>
            <a data-toggle="collapse" data-target="#collapse1">
                <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
            </a>
        </h4>
    </div>

    <!-- Populated submenus: -->
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <a href="view.php?cms_nav_id=7" name="ohioimprovementprocess">Ohio Improvement Process</a>
        </div>
        <div class="panel-body">
            <a href="view.php?cms_nav_id=8" name="org/orgbeliefs">Organization Beliefs</a>  
        </div>
    </div>

</div><!-- /.panel -->
_

私は次に何を試すべきか本当に分かりません：同様の質問が「CSSコンフリクト」または.click()に関するiphoneの問題で終わりましたが、私はそれを使用していません：私は_data-toggle/data-target_を使用しています。 on('click', ... )イベントを手動で呼び出すことを優先して、 'data-target'マークアップを放棄することを検討していますが、私はむしろ….

ちなみに、関連する場合は、ページの下部でこれを呼び出します。

_<script src="/assets/dist/js/bootstrap.min.js"></script>
_

これは 'bootstrap.js v3.0.0'です。

誰か他の手がかりはありますか？このような問題に関する最近の直接的な経験はありますか？

よろしくお願いします。

javascriptjqueryioscsstwitter-bootstrap
39
Ryan

だから私はこれを理解したと思う：私の元のマークアップはデータターゲット要素のみに依存していたが、それは明らかに十分ではない。 Safari（iPhoneの場合）にはhref属性も必要なようです（<a>とにかく。したがって、これは動作します：

<a data-toggle="collapse" data-target="#collapse1" href="#collapse1">
    <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>

しかし、これはそうではありません：

<a data-toggle="collapse" data-target="#collapse1">
    <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
76
Ryan

私にとって、崩壊はデスクトップとiphoneで機能しますが、私の崩壊のいくつかはipadで機能しませんでした。 @Ryanの答えの@Lorisによって、折りたたみ可能なトリガー（ボタンとして機能するdivなど）にポインタースタイルを追加するという完璧なソリューションが提供されたことがわかりました。これを次のCSSに一般化しました。

[data-toggle~="collapse"] {
    cursor: pointer;
}
25
John Lehmann

これを見て、私は同じ問題を抱えていましたが、href = "＃collapse1"を追加すると、ページの先頭にジャンプします。要素をボタンでラップすることでこれを修正し、ボタンのCSSを削除しました。したがって、コードは次のようになります。

<button data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</button>

お役に立てれば。

7
HanSoloShotFirst

これは私のために働いています：

$('.divClassName').on('click touchstart', function () {
     $($(this).data('target')).collapse('toggle');
});
5
gem007bd

これを修正するには、ドロップダウンをトリガーするdivにこの属性を追加するだけです。

cursor: pointer;
4
Joe Wong

divなどの任意の要素タイプでこれを機能させるには、次のjQueryメソッド（テスト済みのiOS 8）を使用できます。

<div class="collapse-header" data-target="#collapse_0">
    Click this element...
</div>
<div id="collapse_0">
    ...to collapse this element.
</div>

<script>
    $('.collapse-header').on('click', function () {
        $($(this).data('target')).collapse('toggle');
    });
</script>
3
Turnip

さらに参照するには：

私のアプリケーションでこれを行いました：

a[data-toggle="collapse"]{
  cursor:pointer;
}

そしてそれは問題を修正しました。

MDNのドキュメントには次のように書かれています：

「Safari Mobile 7.0+（およびおそらく以前のバージョンも）には、通常インタラクティブではない（たとえば）要素でクリックイベントが発生せず、要素自体にイベントリスナーが直接接続されていないというバグがあります（すなわち、イベントの委任が使用されています。）デモンストレーションについては、このライブ例を参照してください。要素をクリック可能にすることと「クリック可能な要素」の定義に関するSafariのドキュメントも参照してください。

参照：

1
Jorge Vargas