Będzie to ekstremalnie prosty do dołączenia do kodu skrypt jQuery, który rozwiąże cały problem. Aby dokładniej zobrazować istotę problemu, zobacz poniższą animację. Przygotowałem dwie wersje menu, jedna dla urządzeń z dużym ekranem (jak np. laptopy) gdzie menu jest rozwinięte oraz oraz drugie dla urządzeń mobilnych (np. telefony, tablety), gdzie domyślnie jest zwinięte. O ile na dużych ekranach, gdzie menu jest od razu rozwinięte nie widać żadnego problemu – klikasz link i przenosi na odpowiedni odnośnik, jednak w przypadku telefonu takie zachowanie nie jest pożądane, ponieważ drugi poziom nawigacji jest ukryty, pierwsze kliknięcie powinno tylko i wyłącznie rozwinąć drugi poziom menu.
Jak widzisz, na urządzeniu mobilnym drugi poziom menu jest rozwijany z równoczesnym przejściem na stronę Wikipedii. Takie zachowanie jest nieprawidłowe, naprawmy je prostym w użyciu skryptem.
Struktura HTML menu jest następująca.
See the Pen doubletaptogo example by Tomasz Wikło (@studioleopard) on CodePen.19725
W pierwszej kolejności pobierz i dołącz bibliotekę jQuery, a następnie doubleTapTogo.
<script src=”jquery-latest.min.js”></script>
<script src=”jquery.doubletaptogo.min.js”></script>
Zwróć uwagę na kolejność dołączania skryptów, najpierw jQuery a dopiero później doubleTapTogo. Gdy upewnisz się, że wszystko załadowałeś poprawnie, wystarczy jedna linijka kodu. W jQuerowym $(”) określasz selektor (klasę, identyfikator, znacznik), na jakiej ma zostać uruchomiony skrypt, w naszym przypadku będzie to $(‘.doubleTapToGo’).doubleTapToGo(); ponieważ taką mamy strukturę HTML.
See the Pen doubletaptogo example by Tomasz Wikło (@studioleopard) on CodePen.19725
Jeżeli wszystko zadziałało poprawnie, to rozwiązaliśmy nasz problem, zobacz animację poniżej. Od teraz na urządzeniach mobilnych pierwsze kliknięcie rozwinie menu, a drugie przejdzie na stronę pod tym odnośnikiem.
Zwróć uwagę na konsole, gdy skrypt nie wykryje urządzenia mobilnego, to zwróci komunikat false. Możesz sprawdzić to dodając do kodu console.log($(‘.doubleTapToGo’).doubleTapToGo());. W przeciwnym wypadku, otrzymamy poprawny obiekt jQuerowy a tym samym upewnimy się, że wszystko zostało załadowane poprawnie.
Kliknij tutaj aby pobrać omawiamy przykład. Nie zapomnij przełączyć Twojej przeglądarki w tryb urządzenia mobilnego.
Mam nadzieję, że skrypt Ci się przyda. Daj znać w komentarzu, czy rozwiązał Twój problem z odnośnikami i rozwijanym menu na urządzeniach mobilnych.
Opublikowano 9 października 2017 w kategorii css, html.