jQuery auf Klick-Slide Toggle funktioniert in mobilen, aber bricht, wenn zurück auf den Desktop gebracht

Question

Hier ist mein HTML-und Jquery-Code. Es funktioniert hervorragend auf Mobilgeräten, aber wenn es wieder auf den Desktop gebracht wird, bricht die Navigationsleiste ab. Irgendwelche Ideen? Ich verwende bulma.io

HTML

<span class="nav-toggle"> 
    <span></span> 
    <span></span> 
    <span></span> 
</span> 

    <!-- This "nav-menu" is hidden on mobile --> 
    <!-- Add the modifier "is-active" to display it on mobile --> 
    <div class="nav-right nav-menu"> 
    <a class="nav-item"> 
     Home 
    </a> 
    <a class="nav-item"> 
     Documentation 
    </a> 
    <a class="nav-item"> 
     Blog 
    </a> 

Javasciprt

$(document).ready(function(){ 
    $(".nav-toggle").click(function(){ 
     $(".nav-menu").slideToggle("slow"); 
    }); 
}); 

CSS

@media screen and (min-width: 769px), print { 
    .nav-toggle { 
    display: none; 
    } 
} 

Answer 1

Wenn Sie das Menü auf dem Mobile mit Dia Toggle verstecken, was passiert ist, die jQuery fügt eine Anzeige hinzu: keine Inline im Navigationsmenü.

würde A quick and dirty fix eine CSS-Änderung sein:

@media screen and (min-width: 769px), print { 
    .nav-toggle { 
    display: none; 
    } 
    .nav-menu { display:block !important; } 
} 

Sie tun können, auch mehr beteiligt zu beheben, die für die Animation die Klasse des nav-Menü auf klicken und mit CSS würde sich ändern :

$(document).ready(function(){ 
    $(".nav-toggle").click(function(){ 
     var navMenu = $(".nav-menu"); 

     if(navMenu.hasClass('open')){ 
      navMenu.removeClass('open'); 
     } else { 
      navMenu.addClass('open'); 
     } 
    }); 
}); 

CSS

.nav-menu { max-height:0; opacity:0; transition:all .3s; } 
.nav-memu.open { max-height:80em; opacity:1; } 

@media(min-width:769px){ 
    .nav-menu { max-height:none; opacity:1; } 
} 

Problem mit diesem Ansatz ist, müssen Sie möglicherweise max h einstellen acht je nachdem, wie lange ein Menü erhalten kann.

Here's a fiddle

Answer 2

Ihr Skript neu auf Resize Ihr Problem beheben

$(window).resize(function() { 
    $(".nav-menu").removeAttr("style"); 
});