Twitter Bootstrap: Dropdown-Menüs Hover für Desktop, klicken Sie für Tablets/Telefone?

Es scheint viele Fragen/Antworten zu geben, wie man die Drop-downs von Twitter Bootstrap von einem Klick zu einem Hover verändern kann. Die Builder von Bootstrap haben einen guten Grund dafür, Click statt Hover zu verwenden - Hover funktioniert nicht auf den meisten Tablets &. Einer der Gründe, warum ich Bootstrap benutze, ist jedoch die reaktionsschnellen Funktionen. Ich möchte eine Website, die auf Desktops, Tablets und Smartphones angezeigt werden kann. Obwohl das Klicken auf das Dropdown-Menü für Tablets und Telefone erforderlich ist, ist dies nicht das erwartete Verhalten für Desktops. Ich möchte, dass meine Website reaktionsschnell ist, aber nicht auf Kosten der Umschulung der Nutzer!Twitter Bootstrap: Dropdown-Menüs Hover für Desktop, klicken Sie für Tablets/Telefone?

Gibt es eine Möglichkeit schweben Dropdown-Listen für Desktops zu dienen und klicken Sie auf Dropdown-Listen für Tabletten und Telefone?

Quelle

2012-06-18 Tonya Abna

Sie können mit „Responsive Utility-Klassen“

http://twitter.github.com/bootstrap/scaffolding.html am unteren Rand der Seite

Quelle

2012-06-18 22:42:35 baptme

Eigentlich durch ansprechende Utility-Klassen verwenden, es scheint, muss ich hätte zwei getrennte Versionen meines Menüs. Man würde für Telefon/Tablet zeigen, und man würde für den Desktop zeigen. Im Idealfall möchte ich nur ein Menü. –

@TonyaAbna Sie können das http://jsfiddle.net/baptme/gRVUq/1/ tun, aber Sie werden einige jQuery benötigen das Drop-down auf dem zweiten Klick zu schließen. – baptme

tapme, ich bin mir nicht sicher, ob ich deine Antwort verstehe. Ich sehe, wie Sie die Drop-Down-Arbeit auf Hover statt klicken, aber ich suche nach einer Lösung, die für den Desktop schweben und für Telefon/Tablet klicken kann. Fehle ich etwas in deiner Demo? Was macht die leere Klick-Funktion? –

Ich habe ein Plugin (auf ein paar Verfeinerungen zu arbeiten, aber es funktioniert auf jeden Fall wie), die Dropdown-Listen erlaubt zu arbeiten Bei Hover, aber das Klickereignis von Twitter Bootstrap wird nicht beeinflusst. Sie können also beides sicher binden, was bedeutet, dass wenn eine Maus vorhanden ist, diese beim Hover aktiviert wird, aber wenn keine Maus vorhanden ist (zB ein Touchscreen auf einem Tablet)), wird es immer noch aktiviert, wenn Sie darauf klicken.

Ich habe das Plugin auf GitHub: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

Es funktioniert, indem es ausdrücklich nennen, aber ich werde den Code optimieren, mit Daten-Attributen in naher Zukunft zu arbeiten.

Quelle

2012-10-17 15:22:27 CWSpear

CWSpear: Dein Plugin funktioniert super und super einfach zu installieren/zu benutzen. Ich schätze es sehr, dass Sie es teilen. Vielen Dank! ~ Susan – susan

es ist sehr cool ..und easy @CWSpear –

Ich war auf der Suche genau dafür. Und ich habe eine bessere Lösung gefunden (denke ich). Wir können dies mit super Modernizr.js Bibliothek leicht tun. Wir können das Touchscreen-Gerät durch die folgende Funktion erkennen.

function is_touch_device() { 
    return !!('ontouchstart' in window); 
}

Und dann können wir die URL in dem Hyperlinks dynamisch über Javascript entweder durch Änderung der Lage zu „#“ oder durch die Verhinderung der Standardaktion des übergeordneten Menüpunktes deaktivieren. Der endgültige Code wäre wie folgt.

Für weitere Informationen können Sie sehen this link ich mich jemand glauben abstimmen wird :-)

Dank

Quelle

2015-08-13 17:46:29

Ihre Lösung scheint nicht viel mit der Modernizr.js-Bibliothek zu tun zu haben ... scheint, als ob sie fast wörtlich mit jQuery funktionieren würde. (Bearbeiten: Tippfehler im Bibliotheksnamen) –

Twitter Bootstrap: Dropdown-Menüs Hover für Desktop, klicken Sie für Tablets/Telefone?

Antwort

Verwandte Themen