質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2380閲覧

フッターメニューをリサイズしてアコーディオンにしたい

lingwood

総合スコア40

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/12/07 02:30

###前提・実現したいこと
見た目的なだけでなく可変対応させたいです。
リロードするタイプはできるのですが、
シンプルな方法でリサイズ対応をしたいです。

###発生している問題
PC表示からはじめて480px以下にすると、
見た目的にはリストは非表示になるのですが、
クリックしても動かない(当然ですが)
スマホ表示(480px以下)でリロードすると
動くのですが、PCサイズにリロードしても
見出しをクリックすると動いてしまいます。

できれば今後のためにもコードをシンプルに
したいのですが、できず困っております。

###該当のソースコード
リロードが必要なタイプ

$(function(){ var x = 480; var ws = $(window).width(); if (ws <= x) { $( ".fnavi h4" ).click(function(){ $(this).next("ul").slideToggle(); $(this).toggleClass("active"); }); } });

###上記コードに対して試したこと
他にもいろいろやってみたのですが、
何度も上書きしてしまってとりあえず
今朝やってみたものを下記に挙げています。

$(function() { $(window).resize(function() { var x = 480; var ws = $(window).width(); if (x <= ws ) { $( ".fnavi h3" ).click(function(){ $(this).next("ul").slideToggle(); $(this).toggleClass("active"); }); } }) });
$(function() { var display = function(){ var x = 480; var ws = $(window).width(); if (ws <= x ) { return true; } else{ return false; } } if ( display() ) { $(".fnavi .vl_box ul").hide(); } $( ".fnavi h3" ).click(function(){ $(this).next("ul").slideToggle(); $(this).toggleClass("active"); }); $(window).resize(function(){ if(display()){ $(".fnavi .vl_box ul").hide(); } else{ $(".fnavi .vl_box ul").show(); } }) });

師走の忙しい時にすみませんが、よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mri0815

2017/12/07 02:45

実行可能なようにhtml、cssについても追記いただけますか。
lingwood

2017/12/07 05:47

serara13 様 親身ご連絡ありがとうございます!せっかくご検討いただけるとのことですが、aozukiさんのやり方で解決することができました。
guest

回答1

0

ベストアンサー

HTMLも欲しいところですが
とりあえずクリックされてから$(window).width();を取得すれば481px以上では動かず、480px以下では動きます

JavaScript

1$(function(){ 2 $( ".fnavi h4" ).click(function(){ 3 var x = 480; 4 var ws = $(window).width(); 5 if (ws <= x) { 6 $(this).next("ul").slideToggle(); 7 $(this).toggleClass("active"); 8 } 9 }); 10});

あとはリサイズした際にCSSのメディアクエリかjQueryで表示・非表示を切り替えてあげれば良いでしょう

投稿2017/12/07 02:52

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lingwood

2017/12/07 05:59 編集

aozuki 様 ありがとうございました!!! できました! コードは以下のように手を加えて動きました。 とても助かりました。 $(function(){ $( ".fnavi h4" ).click(function(){ var x = 480; var ws = $(window).innerWidth(); if (ws <= x) { $(this).next("ul").slideToggle(); $(this).toggleClass("active"); } if (ws <= x) { $(window).resize(function(){ $(".fnavi h4").next("ul").css("display","block"); }) } else { $(window).resize(function(){ $(".fnavi h4").next("ul").css("display","none"); }) } }); }); 1点、教えていただけませんでしょうか? ウィンドウサイズを取得する部分を上記のとおり innerWidthに変更しました。これは正しかったでしょうか? 上記はこれで480でぴったり変更できたのですが、 他にもウィンドウサイズ幅で可変する箇所があり、 そちらにも$(window).innerWidthをつけてみたのですが、 そちらではメディアクエリとCSSがあいませんでした。 (メディアクエリ980pxの箇所があり、964で指定したら980pxで合いました。) 調べてたのですが、window.innerWidthプロパティ は$(window).innerWidthではなく$window.innerWidth となっていました。こうしなければいけないのでしょうか? ですが、上記のようにinnerWidthへ変更したら480でちゃんと できました。 そのため間違ってもないような気もします。 こうした辺りが非常にわかりにくく、 分かる範囲で教えていただくことはできませんでしょうか。 宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問