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

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

ただいまの
回答率

91.36%

  • JavaScript

    11208questions

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

  • jQuery

    4890questions

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

  • CSS

    3871questions

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

  • レスポンシブWebデザイン

    169questions

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

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

解決済

回答 1

投稿 2017/12/07 11:30

  • 評価
  • クリップ 0
  • VIEW 54

lingwood

score 17

前提・実現したいこと

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

発生している問題

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();
        }
    })
});

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • serara13

    2017/12/07 11:45

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

    キャンセル

  • lingwood

    2017/12/07 14:47

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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


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

投稿 2017/12/07 11:52

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/07 14: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でちゃんと
    できました。
    そのため間違ってもないような気もします。

    こうした辺りが非常にわかりにくく、
    分かる範囲で教えていただくことはできませんでしょうか。

    宜しくお願い致します。

    キャンセル

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

ただいまの回答率

91.36%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11208questions

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

  • jQuery

    4890questions

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

  • CSS

    3871questions

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

  • レスポンシブWebデザイン

    169questions

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