webentwicklung-frage-antwort-db.com.de

bootstrap 3 Akkordeon Zusammenbruch funktioniert nicht auf dem iPhone

Diese "Akkordeon Untermenüs" funktionieren in Chrome und Firefox, aber nicht auf einem iPhone.

Ich habe eine Site erstellt, die ein "Offcanvas" -Navigationsmenü auf kleineren Bildschirmen enthält. Der Benutzer klickt auf die Schaltfläche "Hot Dog", und das Navigationsmenü wird von links auf den Bildschirm verschoben. Das funktioniert bisher hervorragend.

Einige der Navigationselemente enthalten Untermenüs. Für diese habe ich Bootstraps Akkordeon Markup verwendet. Der Benutzer klickt auf einen Pfeil und das "Untermenü" wird erweitert.

enter image description here

Das Problem

Ich entwickle mit Chrome unter Linux. Dieser Mechanismus funktioniert perfekt in Chrome, Firefox und jedem Browser, den ich in die Hände bekommen kann, sowie auf meinem persönlichen Android-Handy. Es funktioniert auch unter responsinator.com . Da ich jedoch weder Safari noch ein iPhone besitze, konnte ich diese Funktion nicht direkt auf einem iPhone testen. Ich arbeite daran, einen iPhone-Emulator zu bekommen ...

Bis dahin haben sich einige andere Leute das auf einem iPhone angesehen und mir wurde gesagt, dass die "Untermenüs" überhaupt nicht funktionieren. Wenn der Benutzer auf den Pfeil klickt, passiert nichts ...

Hier ist ein Auszug aus einem "Menüpunkt", der ein "Untermenü" enthält: Bitte beachten Sie, dass ich die Attribute "Daten umschalten" und "Datenziel" verwende:

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

Ich weiß wirklich nicht, was ich als Nächstes versuchen soll: Ähnliche Fragen endeten mit "einem CSS-Konflikt" oder iPhone-Problemen in Bezug auf .click(), aber ich verwende das nicht: Ich verwende data-toggle/data-target. Ich überlege, das Markup "Datenziel" aufzugeben, um manuell ein on('click', ... ) -Ereignis aufzurufen, aber ich würde lieber nicht ...

Übrigens nenne ich das unten auf meiner Seite, wenn das relevant ist:

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

Welches ist "bootstrap.js v3.0.0".

Hat jemand andere Hinweise? Haben Sie in letzter Zeit direkte Erfahrungen mit einem Problem wie diesem gemacht?

Vielen Dank im Voraus für Ihre Hilfe.

32
Ryan

Ich denke, ich habe das herausgefunden: Mein ursprüngliches Markup war ausschließlich auf das Datenzielelement angewiesen, aber das reicht anscheinend nicht aus. Safari (auf dem iPhone) scheint auch das href-Attribut zu benötigen (was eigentlich ohnehin auf einem <a> sein sollte. Das funktioniert also:

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

Dies gilt jedoch nicht:

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

Für mich würde der Zusammenbruch auf Desktop und iPhone funktionieren, aber einige meiner Zusammenbrüche funktionierten nicht auf Ipad. Es stellte sich heraus, dass @Loris in @ Ryans Antwort die perfekte Lösung für mich gegeben hat, um den Zeigerstil zu jedem ausklappbaren Auslöser (z. B. einem als Schaltfläche fungierenden Div) hinzuzufügen. Ich habe dies auf folgendes CSS verallgemeinert:

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

wenn ich mir das ansehe, hatte ich das gleiche Problem. Wenn Sie jedoch ein href = "# collapse1" hinzufügen, springen Sie an den Anfang der Seite. Ich habe das Problem behoben, indem ich das Element in eine Schaltfläche einwickelte und die CSS für Schaltflächen entfernte. Ihr Code wäre also:

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

Hoffe das hilft. 

7

Sie können dies beheben, indem Sie dieses Attribut einfach dem div hinzufügen, das die Dropdown-Liste auslöst.

cursor: pointer;
4
Joe Wong

Damit dies für jeden Elementtyp funktioniert, beispielsweise für eine div, können Sie die folgende jQuery-Methode (getestetes iOS 8) verwenden:

<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

Das funktioniert für mich: 

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

zur weiteren Referenz:

Ich habe das in meiner Bewerbung gemacht:

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

Und das Problem wurde behoben.

In der MDN-Dokumentation heißt es:

"Safari Mobile 7.0+ (und wahrscheinlich auch frühere Versionen) leidet unter einem Fehler, bei dem Klickereignisse nicht für Elemente ausgelöst werden, die normalerweise nicht interaktiv sind (z. B.) und die auch keinen Ereignisempfänger haben, der direkt mit den Elementen selbst verbunden ist ( Beispiel: Ereignisdelegation wird verwendet). Sehen Sie sich dieses Live-Beispiel für eine Demonstration an. Lesen Sie auch die Dokumentation von Safari zum klickbaren Element und zur Definition von 'anklickbares Element' ".

Verweise: 

0
Jorge Vargas