レスキューメニューでshow（）の代わりにclick関数toggleclassを2回使用する

Question

レスポンシブメニューを試しています。小さいサイズで、代わりにグリッド記号に置き換えられています（今のところ色付きのボックスです）。

一部のHTMLはここにある：

とにかく

<div class="mplace"> 

<a class="grid" href="#"></a> 
<a class="close" href="#"></a> 

<div class="holder"> 

<ul class="menlist"> 
<li><a href="http://www.w3schools.com">Home</a></li><li> 
<a href="http://www.bing.com">Bing</a> 
</li><li><a href="http://www.yahoo.com">Yahoo</a> 
</li><li><a href="http://www.google.com">Google</a> 
</li><li><a href="http://www.w3schools.com/about/default.asp">Contact</a></li> 

</ul> 

</div> 
</div> 

、ときに近いそして、これは現実世界の問題であるかどうかはわからないが、私は、シンボルをクリックし、メニューが表示されていことができるようにしたいですシンボルがクリックされると、メニューは再び非表示になります。通常のCSSはjqueryをオーバーライドする必要があります。ブラウザが再びフルスクリーンにリサイズされた場合、グリッドシンボルは表示されなくなります。

私が持っている問題は、私が使用しているjqueryでは起こっていないということです。私はdisplay：noneとdisplay：blockを切り替える代わりにtoggleClassを使用しようとしましたが、フルスクリーンに戻ったときにグリッドシンボルが表示されます。

いずれにしても。このjqueryはシンボル間を交互に表示し、メニューを表示したり非表示にしたりしますが、シンボルをクリックした後にフルスクリーンに戻ると、表示されません。あなたは、私はちょうどこのようtoggleClassを入れて行うことができるようにしたいものを、しかしこのJSfiddle

$(document).ready(function() { 

$('.grid').click(function(){ 
    $('.holder ul').toggleClass('menlist'); 
    $('.grid').hide(); 
    $('.close').show(); 
}); 

$('.close').click(function(){ 
    $('.holder ul').toggleClass('menlist'); 
    $('.close').hide(); 
    $('.grid').show(); 
}); 

}); 

で問題を見ることができます。なしと表示：この場合は「非表示」と「ショー」のクラスは、ディスプレイとしてCSSでないだろう。これは、グリッドのボタンがクリックされたとき、それは表示に設定されますを意味します

$(document).ready(function() { 

$('.grid').click(function(){ 
    $('.holder ul').toggleClass('menlist'); 
    $('.grid').toggleClass('hide'); 
    $('.close').toggleClass('show'); 
}); 

}); 

をブロック：なしxシンボルはdisplay：blockに設定されます。逆も同様ですが、もう少しjqueryで起こります。

私は考えることができるすべてを試しましたが、うまく機能しません。どれも、その後切り替えクラス表示のCSSを：：次のようなブロック：

することができますあなたは本当にただtoggleClassを使用して、あなたのメニューにクラスを切り替えると、ディスプレイのこれはあなたのオリジナルメニューのCSSを与えるために必要

Answer 1

カンマで区切られた同じjqueryのクリック機能にメニューを開いてメニューを閉じるボタンを置くと、それに応じてクラスが追加および削除されます。ここで

、あなたのCSSは次のようになりますフィドルFiddle Demo

$(document).ready(function() { 
    $('.grid, .menu-close').click(function(){ 
     $('.menu-list').toggleClass("menu-open"); 
    }); 
}); 

です：私はあなたが私が持っていた難しさを誤解だと思いながら、あなたはAを私に提供し、

.menu-list{ 
    display:none; 
} 
.menu-list.menu-open{ 
    display:block; 
}