Mobilna nawigacja nie chowa się po odesłaniu w odpowiedni link

Question

Witam, chciałbym sprawić, aby po odesłaniu w odpowiednie miejsce, moja nawigacja się schowała z powrotem w hamburgera, a tak to odsyła, ale jest nadal otwarta i zasłania widoczność na stronie. Widziałem kilka podobnych tematów, ale wiele z nich to navbary oparte o checkboxa i nie sprawdza się to u mnie, a jestem cienki w skryptach. Wiem, że dla kogoś, kto ogarnia JS to naprawdę 2 linijki kodu, dlatego bardzo serdecznie proszę o pomoc i z góry dziękuję.

Answer 1

To jest na szybko, bo piszę z komury. Więc posłużyłem się tym co już masz. 

Ale koncepcja jest taka

$('.menu-toggle').click(function(e) {
  e.preventDefault();
  $('.site-nav').toggleClass('site-nav-open', 500);
  $(this).toggleClass('open');
});
$('.site-nav').on('click','a',function(e) {
  e.preventDefault();
  $('.site-nav').toggleClass('site-nav-open', 500);
  $('.menu-toggle').toggleClass('open');
})

 

Comments

Dzięki za poświęcony czas, jednak coś jest nie tak... Podmieniłem swój kod na twój i nic nie działa. A jak dodałem tylko twój, nie usuwając swojego, to nawigacja zamyka się sama po 0.5 sekundy. Trudno, będę szukał dalej. Niemniej jednak dzięki za to, że chciało ci się w ogóle zerknąć. Pozdro!

---

Tak jak napisałem. Klepnąłem na telefonie na twoim linku i działa.

---

Kod działa, więc nie wiem dlaczego u ciebie jest problem?

Trochę go poprawiłem.

function toggleNav(e){
  e.preventDefault();
  $('.site-nav').toggleClass('site-nav-open', 500);
  $('.menu-toggle').toggleClass('open');
}
$('.menu-toggle').on('click',toggleNav);
$('.site-nav').on('click','a',toggleNav);

A co do samej struktury hedera to jest on chaotyczny i  mało dostępny.

H1 powinno być raczej w header a nie w nav

nav może pełnić rolę kontenera więc container jest zbędny.

hamburger powinien jakoś łączyc sie z nav np.

aria-controls=""

i raczej powinien być przyciskiem.

Wstawianie ikonek za pomocą <i> już dawno na tym forum zostało napiętnowane :)

Comandeer's blog

---

Dzięki za wskazówki, poprawię to co mówisz. Na telefonie nawigacja się zwija, ponieważ linki prowadzą do #, czyli coś w rodzaju odświeżenia strony - no bo z powrotem po kliknięciu mamy dostać stronę główną. Jednak jeżeli podpinam twój kod do mojego landing page, to nie działa. Wkleję w codepena cały landing page i możesz zobaczyć, że nie działa :)
Oczywiście nie ma zdjęć, więc strona nie ma wszystkich zawartości

---

usuń

return false

ze skryptu w html

---

Nie wiem jak mam ci dziękować - wszystko działa jak należy! Wielki szacun dla ciebie!