みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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を有効にするにはどうしたらいいのでしょうか?教えてください。
以上、よろしくおねがいします。

投稿日時 - 2015-04-09 21:48:13

QNo.8952609

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

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

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

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

投稿日時 - 2015-04-10 07:20:14

補足

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

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

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

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

投稿日時 - 2015-04-10 08:14:19

ANo.1

うーん

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

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

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

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

投稿日時 - 2015-04-09 21:57:02

補足

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

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

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

投稿日時 - 2015-04-10 04:05:04

お礼

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

投稿日時 - 2015-04-12 14:18:09

あなたにオススメの質問