jQuery rozwijane menu na telefonach

Tworzę właśnie stronę responsywną z rozwijanym submenu. Na desktopie po prostu pojawia sie po najechaniu, na telefonie musi sie rozwinac po kliknieciu w rodzica.

I niestety na desktopie działa, a na telefonie już zamiast rozwinąć podmenu przechodzi w strone z linku.
Wiecie może co z tym zrobić?

Strona aktualnie znajduje sie na http://test7.stronademo.pl/

kod js odpowiedzialny za rozwijanie:

Kod:

---


// media query event handler
                if (matchMedia) {
                        var mq = window.matchMedia("(max-width: 759px)");
                        mq.addListener(WidthChange);
                        WidthChange(mq);
                }

                // media query change
                function WidthChange(mq) {

                        if (mq.matches) {
                                $('.main-nav > ul > li.menu-item-has-children > a').on('click',function(e){
                                                e.preventDefault();
                                                $this = $(this);
                                                ul = $($this).next('ul');
                                                ul.slideToggle();
                                                return false;
                                       
                                });
                        }
                        else {
                                        $('.main-nav > ul > li ul').slideUp();
                        }

                }

---

u mnie chyba działa poprawnie? #ios7

https://i.imgur.com/GRaP5X5.jpg

Tak, na jakims tablecie z orange tez dziala, na moim samsung galaxy gio nie dziala, u brata na htc jakims tam, tez nie dziala.

Moze chodzi cos o androidzie. Robilem rozne kombinacje z e.preventDefault(), stopPropagation itp, ale nic nie dziala :/

na LG 4X HD z andkiem 4.1.2 i operą śmiga dobrze

U mnie chyba dobrze, tak? #sgs3 #cm10.2 (4.3) #dolphin_drowser
https://dl-web.dropbox.com/get/Scree...QUughSGrx9JMxQ

HTC One S, Andek 4.1.2, Opera (ta nowa, znienawidzona przez większość) - działa dobrze, wszystko rozwija się jak powinno.

Dodaj testowo oprócz/zamiast preventDefault() stopImmediatePropagation() i daj znać jak się zachowuje.

Logowałeś, czy JS poprawnie wchodzi do przypadku z media query?

Cytuj:

---

Messer napisał

Logowałeś, czy JS poprawnie wchodzi do przypadku z media query?

---

Poprawnie dziala, mozna to zobaczyc powiekszajac i zmniejszajac przegladarke. Po przejsciu z widoku mobilnego na desktopowy nastepuje zwiniecie wszystkich rozwinietych menu.

Cytuj:

---

Messer napisał

Dodaj testowo oprócz/zamiast preventDefault() stopImmediatePropagation() i daj znać jak się zachowuje.

---

Juz sprawdzam :)

@edit
Nie pomoglo :/

Tak jak myślałem. Btw, skoro problem jest na telefonie to nie testuj na desktopie. Wrzuć alerty w kilku miejscach i daj znać czy interpreter w ogóle tam dolatuje.

#dojadę zaraz z pracy do domu to naprawię Twój kod.

:o W sumie nie pomyslalem o tym, zrobilem akcje ze jak mq sie zgadza to linkom robi czerwone tlo, na desktopie dziala na telefonie nie.

Dobra pokombinuje dalej bo mam na czym sie oprzec :)

klepnalem w przegladarce, sprawdz jak sie zachowuje:
(setTimeout jest zwiazany z bugiem na stockowych przegladarkach 2.3 androida)

Kod:

---

setTimeout(function(){
        $('.main-nav > ul > li.menu-item-has-children > a').on('click',function(e){
                if ($(window).width() < 760) {
                        e.preventDefault();
                        $(this).find('.sub-menu').slideToggle();
                        return;
                }
        });
        $('.main-nav > ul > li ul').slideUp();
}, 300);

---

#literowka

W sumie dodam jeszcze jedno: nie potrzebujesz słuchać eventu matchMedia na window w tym wypadku. Szerokość potrzebna jest Ci tylko i wyłącznie przy kliku, pobieraj więc ją tylko wtedy. Co więcej, matchMedia nie działa na większości androidów <= 2.3, iOS 4 i IE9.

Dzieki bardzo. To rozwiazanie z matchMedia znalazlem na stackoverflow i mialo duzo plusow to sadzilem ze to bedzie dobre rozwiazanie. Szkoda ze nie dziala na starszych androidach :/

Problem rozwiazal taki kod:

Kod:

---

setTimeout(function(){
        $('.main-nav > ul > li.menu-item-has-children > a').on('click',function(e){
                if ($(window).width() < 760) {
                        e.preventDefault();
                        $(this).next('ul').slideToggle();
                        return;
                }
        });
       
}, 300);

$(window).on('resize',function(){
        if ($(window).width() > 759) {
                $('.main-nav > ul > li ul').hide();
        };
});

---

Sądzę że do zamkniecia :)

Hovery to zło nawet na desktopach. Tego po prostu się nie robi

Cytuj:

---

zakius napisał

Hovery to zło nawet na desktopach. Tego po prostu się nie robi

---

Ciekawe, rozwiń.

Niby czemu się nie robi.