Śledź Bootstrap: menu rozwijane Najedź kursorem na pulpit, kliknij na tablety/telefony?

Wygląda na to, że istnieje wiele pytań/odpowiedzi dotyczących sposobu zmiany listy rozwijanej w usłudze Twitter Bootstrap po kliknięciu przycisku myszy. Twórcy Bootstrap mają dobry powód, by używać kliknięcia zamiast hover - na większości tabletów & telefony nie działają. Jednak jednym z powodów, dla których używam Bootstrapa, są jego responsywne funkcje. Chcę jedną stronę, która może być wyświetlana na komputerach stacjonarnych, tabletach i telefonach. Chociaż kliknięcie, aby uzyskać rozwijane menu, jest niezbędne w przypadku tabletów i telefonów, nie jest to oczekiwane zachowanie komputerów stacjonarnych. Chciałbym, aby moja strona była responsywna, ale nie kosztem przekwalifikowywania użytkowników!Śledź Bootstrap: menu rozwijane Najedź kursorem na pulpit, kliknij na tablety/telefony?

Czy istnieje sposób, aby wyświetlać rozwijane narzuty na pulpicie i wyświetlać listy rozwijane na tablety i telefony?

Źródło

2012-06-18 Tonya Abna

Można z „Responsive klasach użytkowych”

http://twitter.github.com/bootstrap/scaffolding.html na dole strony

Źródło

2012-06-18 22:42:35 baptme

Faktycznie, za pomocą reagujących klasy narzędziowe, wydaje się, że muszę mieć dwie osobne wersje mojego menu. Jeden byłby wyświetlany na telefonie/tablecie, a drugi na pulpicie. Idealnie, chcę tylko jedno menu. –

@TonyaAbna możesz zrobić to http://jsfiddle.net/baptme/gRVUq/1/, ale będziesz potrzebować jQuery, aby zamknąć menu 2-krotne kliknięcie. – baptme

baptme, nie jestem pewien, czy rozumiem twoją odpowiedź. Widzę, jak robiłeś rozwijanie pracy na kursie, a nie kliknięciu, ale szukam rozwiązania, które może wykonać najeżdżanie na komputer i kliknąć na telefon/tablet. Czy brakuje mi czegoś w twoim demo? Do czego służy funkcja pustego kliknięcia? –

stworzyłem wtyczki (pracuje na kilka udoskonaleń, ale na pewno działa jak jest), który umożliwia Dropdowns pracować ale nie zakłóca to zdarzenia kliknięcia w Twitter Bootstrap, więc możesz bezpiecznie połączyć oba, co w zasadzie oznacza, że jest mysz, aktywuje się po najechaniu myszką, ale jeśli nie ma myszy (np. ekran dotykowy na tablecie), nadal będzie aktywowana po kliknięciu.

Mam plugin hostowane na GitHub: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

Działa poprzez jawne wywołanie go, ale mam zamiar dostosować kod do pracy z danymi-atrybutów w najbliższej przyszłości.

Źródło

2012-10-17 15:22:27 CWSpear

CWSpear: Twoja wtyczka działa niesamowicie i bardzo łatwa w instalacji/obsłudze. Naprawdę doceniam to, że dzielisz się tym. Dzięki! ~ Susan – susan

jest bardzo fajnie ..i easy @CWSpear –

Szukałem właśnie tego. I znalazłem lepsze rozwiązanie (chyba). Możemy to łatwo zrobić za pomocą niesamowitej biblioteki Modernizr.js. Możemy wykryć urządzenie z ekranem dotykowym za pomocą poniższej funkcji.

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

A potem możemy wyłączyć URL w hiperłącza dynamicznie poprzez JavaScript albo zmieniając lokalizację „#” lub poprzez zapobieganie domyślne działanie elementów menu nadrzędnego. Końcowy kod będzie taki, jak poniżej.

Więcej szczegółów można zobaczyć this link wierzę ktoś zagłosuje mnie :-)

Dzięki

Źródło

2015-08-13 17:46:29

Twoje rozwiązanie nie ma wiele wspólnego z biblioteką Modernizr.js ... wygląda na to, że z jQuery działałoby prawie dosłownie. (edytuj: literówka w nazwie biblioteki) –

Śledź Bootstrap: menu rozwijane Najedź kursorem na pulpit, kliknij na tablety/telefony?

Odpowiedz

Powiązane problemy