jQuery on click slide toggleはモバイルで動作しますが、デスクトップに戻ったときにブレークします

Question

ここに私のhtmlとjqueryコードがあります。モバイルではうまくいきますが、デスクトップに戻ってくるとナビバーが壊れます。何か案は？あなたはスライドトグルを使用してモバイルでメニューを非表示にした場合、私は何が起こることはある、CSS

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

Answer 1

Javasciprt

bulma.ioに

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

を

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> 

を使用していますjQueryは、ナビゲーションメニューに表示：なしをインラインで追加しています。

迅速かつ汚い修正がCSSの変更のようになります。

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

また、クリックでナビゲーションメニューのクラスを変更し、アニメーションのためのCSSを使用したことになるより複雑な修正を、行うことができます：このアプローチの

$(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; } 
} 

問題がありますが、最大の時間を調整する必要がある場合がありますメニューはどのくらいの時間を得ることができるかによって8つあります。

Here's a fiddle

Answer 2

これは

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