640px以下の時のみjQueryを有効にしたい

質問

JQueryで、以下のソースでやりたい事が実現できました。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$('nav ul').hide();
$('.menu-icon').on('click', function() {
var $navList = $(this);
if($navList.hasClass("current")) {
$('nav ul').slideUp(500,function(){
$navList.removeClass("current");
});
} else {
$('nav ul').slideDown(500,function(){
$navList.addClass("current");
});
};
return false;
});
});

</script>

が、640px以上のときも、効いてしまって「nav ul」が隠れてしまいます。そこで、
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
if (window.matchMedia( '(max-width: 640px)' ).matches) {
「上記javascript」
}
</script>
と、切り分けをし640px以下のときだけ、jqueryが聞くようにしたつもりなのですが、以下の問題が発生しました。

640px以上の場合はjavascriptが無効になったのですが、640px以下の場合には、以下の問題が発生しました。
・640px以上の場合はhideされることなく表示されるようになったのですが、640px以下の場合にも.hideされずに開きっぱなし
・.menu-iconでhideのオン・オフが切り替えられたのですが、無反応になりました。

つまり、全体にjavascriptが全く聞いていない。640px以下の時のみjQueryを有効にするにはどうしたらいいのでしょうか？教えてください。
以上、よろしくおねがいします。

回答No.2

muuming2001

詳細まで見てませんが全体の動作を６４０ピクセル以上の場合動かないようにしているのだから

$('.menu-icon').on('click', function() {　
からのくだりも６４０ピクセル以上の時は動作していない。

この部分はメニューのボタンをクリックされた時のイベントを追加している部分ですよね？
この部分はウィンドウの横幅関係なく動作させないといけないのでは？

補足

引き続き、ありがとうございます。

サイドメニューの動作で使用する予定です。ブラウザ幅641px以上の場合には、普通のcssでサイドメニューを表示しています。640px以下になった場合に、サイドメニューを非表示にし、menu-icon（バーガー）でメニューの開閉を行いたいです。

ですから、640pxの場合にはもともと出ていることから、ボタン操作は不要となります。

どうぞよろしくお願いします。

回答No.1

muuming2001

うーん

「やりたい事が実現」できたような気がしたけどうまく行ってないので、どうしたら良いかの質問だと思うのですが、

「やりたい事」は何ですか？

640px以上の時　→　何が640px以上ですか？

記載されたソースを読み取って「やりたい事」を推測して答えてくれる人も居るかもしれんが・・・・・

お礼

muuming2001 さま、ありがとうございました。

補足

伝わらない質問とのご指摘ありがとうございます。

最終目標は、レスポンスデザインページにしたいです。ブラウザ幅640px以下のアクセスの時のみ最初のjQueryソースの反映を行いたいのです。

どうぞよろしくお願いします。