Elemente ausblenden, wenn Breite ändern

Question

Ich habe Frage, weil ich versuche, Menü zu verstecken, wenn die Fensterbreite mehr als 766px ist. Dies ist mein Code, aber nicht funktioniert

HTML

<div class="menu"> 
    <div class="burger-menu"> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 
    <ul class="submenu"> 
     <li><a href="#about-me">O mnie</a></li> 
     <li><a href="">Prace</a></li> 
     <li><a href="">Certyfikty</a></li> 
     <li><a href="">Cennik</a></li> 
     <li><a href="">Kontakt</a></li> 
    </ul> 
</div> 

JQuery

//Burger menu 

$('.burger-menu').click(function(){ 

    $(this).toggleClass('open'); 

}); 

//Menu list 

$('.burger-menu').click(function(){ 
    $('.submenu').slideToggle();  
}); 


if($(window).width() > 766){ 
    $('.submenu').hide(); 
}else { 
    console.log('halo'); 
}; 

Alles funktioniert, aber wenn ich Burger und Menü Rutsche zum Beispiel auf 677px klicken und dann die Fenstergröße ändern, um mehr als 766px Menü noch da. Vielen Dank für jede Hilfe

Answer 1

Problem: -

Fensterbreite nicht Prüfcodes jede Zeit ausgeführt wird, wenn Sie Ihre Fenster sind Ändern der Größe.

Lösung: -

Verwenden jQuery resize() wie unten: -

$(window).resize(function(){ 
    if($(window).width() > 766){ 
    $('.submenu').hide(); 
    }else{ 
    console.log('halo'); 
    //add $('.submenu').show(); to show menu 
    } 
}); 

Hinweis: - Rest des Codes ist Ok.

Answer 2

Sie könnten CSS-Medienabfragen verwenden, aber da Sie jQuery möchten ... Bei der Fenstergrößenanpassung müssen Sie die Breite des Fensters überprüfen. Mit Ihrem Code wird er nur einmal ausgeführt.

$('.burger-menu').click(function(){ 

    $(this).toggleClass('open'); 

}); 


//Menu list 

$('.burger-menu').click(function(){ 
    $('.submenu').slideToggle();  
}); 


$(window).resize(function(){ 
    if($(window).width() > 766){ 
     $('.submenu').hide(); 
    }else { 
     console.log('halo'); 
    }; 
} 

Answer 3

erwartetes Ergebnis zu erzielen, unter CSS

@media (min-width: 766px) { 
    .submenu { 
    display: none; 
    } 
} 

Codepen verwenden - https://codepen.io/nagasai/pen/yXRVOe

Andere Option JQuery Mit, unter Änderungen auf Resize arbeiten und auf Seite Last

1. die Bildschirmbreite auf Last prüfen und wenn Breite mehr als 766px, verstecken .submenu

2. Am Fenster Resize, zeigen die .submenu, wenn die Bildschirmbreite kleiner als 766px und verstecken, wenn mehr als 766px

   Verwenden Jquery, folgen Sie den Schritten

   if ($ (window) .width()> 766) { $ ('. Submenu'). Hide(); }

   $ (Fenster) .resize (function() { if ($ (Fenster) .width()> 766) { $ ('Untermenü.') Hide();. } else { $ ('. Submenu'). Show(); // füge sonst noch hinzu, um anzuzeigen, ob Bedingung faile Konsole.log ('Halo'); }; });

https://codepen.io/nagasai/pen/vZVyyz

Answer 4

sollten Sie die Formatfunktion in Jquery rufen // die Funktion die div Funktion hideDiv() {

if ($(window).width() < 1024) { 

     $("#floatdiv").fadeOut("slow"); 

}else{ 

    $("#floatdiv").fadeIn("slow"); 

} 

} 

//run on document load and on window resize 
$(document).ready(function() { 

//on load 
hideDiv(); 

//on resize 
$(window).resize(function(){ 
    hideDiv(); 
    }); 

}); 

oder Sie können es mit CSS Medien zu verstecken tun Abfrage:

/* always assume on smaller screen first */ 

#floatdiv { 
    display:none; 
} 

/* if screen size gets wider than 1024 */ 

@media screen and (min-width:1024px){ 
    #floatdiv { 
     display:block; 
    } 
}