uzycie funkcji hide/show jQuery dla okreslonej szerkosci ekranu po kliknieciu w anchor link - problem z innerWidth

Question

Witam,

W mobile menu mam link, ktory jest anchorem na tej samej stronie, napisalam skrypt jak ponizej, ktory dziala tzn ukrywa i pokazuje mobile menu. Jednak ta wersja ukrywa mi takze moje menu na desktopowej wersji.

$(document).ready(function(){
  $(".link5Click").click(function(){
    $("#myNav").hide();
  });
  $("#hamburger").click(function(){
    $("#myNav").show();
  });
});

Podjelam probe przebudowy, jednak nie dziala moje podejscie, prosze o pomoc.

ponizej przebudowany kod z instrukcjami if else

$(function() {
    $(document).ready(function(){
        if(window.innerWidth < 769 && ".link5Click".click(function(){
            $('#myNav').hide();
        }));
     else 
        $("#hamburger").click(function(){
            $('#myNav').show();
        })
    })
});

 

Answer 1

Hej,

Masz błąd w warunku, poza tym lepszym rozwiązaniem jest matchMedia. Przykładowo:

var onMobile = window.matchMedia("screen and (max-width: 768px)");

if (onMobile.matches) {
  $(".link5Click").click(function() {
    $("#myNav").hide();
  });
} else {
  $("#hamburger").click(function() {
    $('#myNav').show();
  });
}

 

Comments

Wielkie dzieki, dziala dla ekranow, super!
JESTES WIELKI !!!

---

Witam ponownie

window.matchMedia("screen and (max-width: 768px)"); dziala tylko pod FF i IE w tej wersji

aby dzialala pod Safari i Chrome UWAGA trzeba poprawic formatowanie:

Powinno byc:

window.matchMedia('screen and (max-width: 768px)');  

zamiast " zastosuj '