SlideToggleのナビゲーションメニュー消える速すぎ

Question

私はこのslidetoggle機能：私は削除する場合は正常に動作

jQuery(document).ready(function(){ 
    jQuery(".menu-trigger").click(function(){ 
     jQuery(".nav-menu").slideToggle(400, function(){ 
     jQuery(this).toggleClass("nav-expanded").css('display', ''); 
     }); 
    }); 
    }); 

は「400は、機能（）」、私は、メニュー・トリガーをクリックすると、メニューが表示されます。それが追加されると、メニューが速く消えて表示され、標準のナビゲーションドロップダウンのように表示されます。ここ

は、メディアクエリのための私のCSSです：

@media screen and (max-width: 480px) { 
.menu-trigger{ /*displays menu-trigger as a block but only when max-width is 
hit */ 
display: block; 
color: white; 
background-color: #5978cf; 
padding: 10px; 
text-align: left; 
font-size: 83%; 
cursor: pointer; 
} 

div.nav-menu{ /*hides nav-menu when under 480px */ 
display: none; 
} 

.div.nav-expanded{ 
display: block; 
} 

div.nav-menu ul li { 
float: none; 
border-bottom: 2px solid #d5dce4; 
} 

div.nav-menu ul li:last-child{ 
border-bottom: none; 
} 
} 
.clearfix:before, .clearfix:after{ 
content: ""; 
display: table; 
} 
.clearfix:after { 
clear:both; 
} 
.clearfix{ 
*zoom:1; 
} 

ない私は、その「400」をどうすると思いますが、私は、このプロセスの記事やビデオを見ていると、彼らはすべてが動作するように見える、そうなぜ私は理解していない。

Answer 1

jQuerys slideToggle（）が設定する表示設定を削除して、メニューが表示されない理由を削除します。それをコードから削除すれば正常に動作します。

次の問題は、あなたのCSSです。この種の問題を避けるために、この例のような「モバイルファースト」のアプローチを考えてみましょう。

この例では、480pxより広いウィンドウでは、「MENU WRAPPER」が表示され、「Button」はウィンドウの幅が狭くなり、ボタンが表示され、メニューが切り替わります。

jQuery(document).ready(function(){ 
 
    jQuery(".menu-trigger").click(function(){ 
 
    jQuery(".nav-menu").slideToggle('fast', function(){ 
 
     jQuery(this).toggleClass("nav-expanded"); 
 
    }); 
 
    }); 
 
});

.menu-trigger{ 
 
    display: block; 
 
    color: white; 
 
    background-color: #5978cf; 
 
    padding: 10px; 
 
    text-align: left; 
 
    font-size: 83%; 
 
    cursor: pointer; 
 
} 
 
.nav-menu{ 
 
    display: none; 
 
    background: green; 
 
    padding:6px; 
 
} 
 
.nav-menu.nav-expanded{ 
 
    display: block; 
 
} 
 

 
@media screen and (min-width: 480px) { 
 
    .menu-trigger{ 
 
    display:none; 
 
    } 
 
    .nav-menu{ 
 
    display: block!important; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menu-trigger">BUTTON</div> 
 
<div class="nav-menu">MENU WRAPPER</div>