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

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

ただいまの
回答率

90.48%

  • JavaScript

    17006questions

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

  • HTML

    9281questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6926questions

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

  • CSS3

    2138questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

画面が480px以下のとき、メニューをドロップダウンにしたいです

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,740

mimimax

score 28

isotope(http://isotope.metafizzy.co/)を使用し、イラストのレスポンシブサイトを作っている初心者です。自分なりに勉強したり、ご教示頂いたりしてある程度まで出来たのですが、『画面が480px以下のとき、複数あるメニュー(isotopeの並べ替えの項目)をドロップダウンにしたい』所で行き詰まっております。
現状を下記にアップしてみました。

http://omatome.sitemix.jp/

ファイルは下記にアップしました。
http://9.gigafile.nu/hc596de80177ef188377febf86056d69d-0410

【やりたいこと】
(1)480pix以下に対応させたいjavascriptは【pix480.js】に書いたのですが、このスクリプトを480px以下の時だけ実施したい。
(2)480px以下でメニューがドロップダウンリストになった時、クリックでリストを開く>項目を選ぶ>リストが自動で閉じる>選択された項目だけが表示されるようにしたい。イメージ説明

この動作が【pix480.js】のみの変更で叶いますでしょうか?いろいろ、文法やイベントなど勉強してみたのですが、理解できませんでした。できましたら、ズバリ教えて頂ければ助かります。よろしくおねがいします。

追記/もし他の部分にでもおかしいところがあれば、アドバイス頂ければ勉強になります。よろしくおねがいします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

ざっくりとですが、こんな感じはいかがでしょうか?

$(function() {
var windowW =$(window).width();//画面の横幅を取得

if(windowW<481){//画面の横幅が480px以下なら
    var open = false;//ドロップダウンリストが開いているか判定する変数
    $(".button:not(.is-checked)").hide();

    $(".button-group").click(function() {
        if(open){
        //ドロップダウンリストが開いていたら閉じる
            $(this).children(".button:not(.is-checked)").hide(0,function(){$(this).css( "zIndex", "" );open = false;});
        }else{
        // "ul.button-group"をクリックするとその中の"li"が見えるようになって、zIndex+1
            $(this).children(".button").show(0,function(){$(this).css( "zIndex", 1 );open = true;});
            /*show/hideの数値はdurationなのでお好みの数値を*/
        }
    })
}
});
  • $(window).load(function(){..});の中に$(function(){...});が入れ子になっていましたが、入れ子にする意味が無いので、一つに。
  • body最後だったので$(function(){...})でいいかな…と。(もし全て読み込み後のほうが良ければ$(window).loadでもいいですが、場合によっては結構遅いので…)
  • 単純に表示/非表示を切り替えるだけなら.toggle()系のメソッドで書いていいと思います。

 4/3追記:画面リサイズでも動くように

自分だとこのようにするかな…というコードを記載させていただきます。

(function($){
    var dropDown = false;//liがモバイル(ドロップダウンリスト)状態か判定する用の変数

    function listOpen(){
        dropDown = false; //ドロップダウン状態をOFF
        $(".button:not(.is-checked)").show();
        $(".button").off(".drop"); //ドロップダウン時に付加したクリックイベントをキャンセル
    }

    function dropDownLi(){
        dropDown = true; //ドロップダウン状態をON
        $(".button:not(.is-checked)").hide();
        $(".button").on( "click.drop" , function() { //isotopeのクリックイベントと衝突しないように名前空間を使って
            var parent = $(this).parent()
            if( parent.hasClass("open") ){ //開いていれば
                $(this).siblings().slideUp( 200 , function(){ parent.removeClass("open") });
            }else{ //閉じていれば
                $(this).siblings().slideDown( 200 , function(){ parent.addClass("open") });
            }
        });
    }

    $(function() {
        var windowW = $(window).width();//画面の横幅を取得

        if( windowW < 481 ){//画面の横幅が480px以下なら
            dropDownLi()
        }

        $(window).resize(function(){
            //window幅が変化した際にドロップダウン状態か判定し、イベントを分岐
            windowW = $(window).width();
            if(windowW < 481){
                if(dropDown) return; //ドロップダウン状態なら以後の処理を行わない
                dropDownLi()
            }else{
                if(!dropDown) return; //ドロップダウン状態でなければ以後の処理を行わない
                listOpen()
            }
        })

    });
})(jQuery);


グローバルをあまり汚したくなかったので、クロージャにしました。
windowのresizeイベントに対して、画面幅によってイベントを分岐させるという処理を入れると作成できます。
resizeイベントは画面幅が変わる度に何度も呼び出されるため、記述によってはイベントがどんどん重複してしまいます。
そのため、今の状態を判別するフラグのようなものを併用して、
状態が変わるとすぐにフラグを切り替え、それ以後同じイベントが呼ばれないようにしています。

また、よくよく考えれば変数の真偽判定だけだと、複数ドロップダウンリストを開いている時の挙動が意図した通りにならないので、親要素へのクラス有無判定に変更しました。

  • ドロップダウン状態⇔通常 を何度も切り替える事も想定して、それぞれのイベントを関数にまとめました。
  • 親要素であるulにクリックイベントだったのが何だか気持ちが悪かったので、li要素に対してのイベントへ変更。
  • isotope側にもliに対するクリックイベントがあるので、衝突を避けるため、clickイベントに名前空間を利用しました。
  • isotopeがせっかくアニメーションで動くのにドロップダウンリストの動きが無いのはちょっとアンバランスかな、と思ったので、show/hideをslideToggleにしてみました。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/03 03:23

    早速のご返答ありがとうございます。丁寧なご解説もありがとうございました。
    組み込んでみましたところ、思った通りの動きです。すごいです!!!

    http://omatome.sitemix.jp/

    まこと勝手ながらもう1つ、ご教示ください。
    Q.レスポンシブなのが面白くついつい、デスクトップでドラックで画面サイズを変えて、楽しんでしまうのですが、その際には読み込まれた際の画面サイズに準じたスクリプトのままですよね?
    例)480px以下の画面で開いて、ドラックで画面を広げると、ボタンが消えたままになってしまう/480px以上の画面で開いて、ドラックで画面を480px以下にすると、ドロップダウンメニューが開いたままになってしまう

    サイトを作って実用したことが無いので、もしかすると必要ないの機能かもしれないのですが、画面のリサイズ(480px基準)でお書き頂いたスクリプトを発動させることは可能ですか? イラストサイトで、たくさん画像を載せページが重くなるとおもいますので、読み込み時の発動にしておいた方が良いのでしょうか?

    よろしくおねがいします。

    キャンセル

  • 2016/04/03 14:08 編集

    お返事が遅くなりました、

    > 画面のリサイズ(480px基準)でお書き頂いたスクリプトを発動させることは可能ですか?
    はい、もちろん可能です。
    回答にコードを追記させていただきましたので、ご参考にしていただけると幸いです。

    > たくさん画像を載せページが重くなるとおもいますので、読み込み時の発動にしておいた方が良いのでしょうか?
    この表示切り替えのイベントは見る限り他のイベントへの依存が無いと思うので、すべての読み込みが完了するのを待たず、DOMが読み込まれた段階で発火させればいいかなと思います。(それでも画面表示の一瞬リストが開いたままの瞬間があるので、気になるようであれcssのメディアクエリでdisplay:noneなりを設定しておいても良いと思います。)

    また、今後画像がどんどん増えていくことを考えると
    lazyLoadなどを入れておくと、表示速度の低下もかなり軽減されると思います。


    ※追記:質問に対する回答が漏れていました…
    > もしかすると必要ないの機能かもしれないのですが
    記載しておいてなんですが、実際必要ないかもしれません…。
    ブラウザ幅を頻繁に変えたりするのは制作側くらいなので、ユーザー様方は気付かないことのほうが多いでしょうね。。
    でも、個人的にはちゃんと切り替わるようになっていて欲しい、と思うのでクライアントワークでは大抵入れてます。

    キャンセル

  • 2016/04/04 14:54

    こちらこそ遅くなりすみません。仕事でばたついておりまして...。

    組み込みましたところ、理想の動きで切り替わりました!
    ありがとうございました。コードに書いて頂いたコメントを元に、なぜ自分で書いたのは動かなかったのかこれから勉強させて頂きます。
    また、※追記のご返答もありがとうございます。web作成は趣味なので、お仕事されている方の経験則的な情報はとっても貴重でありがたいです。
    またよろしくおねがいします。感謝感謝です。

    キャンセル

  • 2016/04/05 02:15

    とんでもないです、こちらも空き時間にやっているだけですのでお互いさまということで。
    (そんな訳で飛び飛びで編集が入って申し訳ないです…通知が何度か行ってしまったかと。。)

    是非是非!色々できるようになってくると、なかなか楽しいものだと思います。
    JavaScriptにはconsole.log()というメソッドが用意されているので、それを使ってデバッグ(バグ・欠陥を発見および修正する作業)すると良いと思います。
    また、Htmlやcssを見直すともっと処理がしやすくなったり、処理を減らしたりすることも多々あります。
    この3つはお互いに大きく影響し合うので、それぞれ洗練させていくと更にできることの幅も広がったり面白くなると思います。

    恐縮です、また何かあれば何なりと!

    ---
    すみません、、追記したコードに1箇所誤記がありました…。
    27行目 × dropDownLi(open) → ○ dropDownLi()
    です。別のやり方を試した際の消し忘れです…修正しておいてください。
    ※追記コードも修正しておきます。

    キャンセル

関連した質問

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

  • JavaScript

    17006questions

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

  • HTML

    9281questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6926questions

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

  • CSS3

    2138questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。