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

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

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

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

JavaScript

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

jQuery

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

HTML

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

Q&A

解決済

1回答

7689閲覧

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

mimimax

総合スコア36

CSS3

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

JavaScript

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

jQuery

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

HTML

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

0グッド

1クリップ

投稿2016/04/02 16:19

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】のみの変更で叶いますでしょうか?いろいろ、文法やイベントなど勉強してみたのですが、理解できませんでした。できましたら、ズバリ教えて頂ければ助かります。よろしくおねがいします。

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

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

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

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

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

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

guest

回答1

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/02 17:20

編集2016/04/04 17:16
manabufukai

総合スコア700

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

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

mimimax

2016/04/02 18:23

早速のご返答ありがとうございます。丁寧なご解説もありがとうございました。 組み込んでみましたところ、思った通りの動きです。すごいです!!! http://omatome.sitemix.jp/ まこと勝手ながらもう1つ、ご教示ください。 Q.レスポンシブなのが面白くついつい、デスクトップでドラックで画面サイズを変えて、楽しんでしまうのですが、その際には読み込まれた際の画面サイズに準じたスクリプトのままですよね? 例)480px以下の画面で開いて、ドラックで画面を広げると、ボタンが消えたままになってしまう/480px以上の画面で開いて、ドラックで画面を480px以下にすると、ドロップダウンメニューが開いたままになってしまう サイトを作って実用したことが無いので、もしかすると必要ないの機能かもしれないのですが、画面のリサイズ(480px基準)でお書き頂いたスクリプトを発動させることは可能ですか? イラストサイトで、たくさん画像を載せページが重くなるとおもいますので、読み込み時の発動にしておいた方が良いのでしょうか? よろしくおねがいします。
manabufukai

2016/04/03 17:21 編集

お返事が遅くなりました、 > 画面のリサイズ(480px基準)でお書き頂いたスクリプトを発動させることは可能ですか? はい、もちろん可能です。 回答にコードを追記させていただきましたので、ご参考にしていただけると幸いです。 > たくさん画像を載せページが重くなるとおもいますので、読み込み時の発動にしておいた方が良いのでしょうか? この表示切り替えのイベントは見る限り他のイベントへの依存が無いと思うので、すべての読み込みが完了するのを待たず、DOMが読み込まれた段階で発火させればいいかなと思います。(それでも画面表示の一瞬リストが開いたままの瞬間があるので、気になるようであれcssのメディアクエリでdisplay:noneなりを設定しておいても良いと思います。) また、今後画像がどんどん増えていくことを考えると lazyLoadなどを入れておくと、表示速度の低下もかなり軽減されると思います。 ※追記:質問に対する回答が漏れていました… > もしかすると必要ないの機能かもしれないのですが 記載しておいてなんですが、実際必要ないかもしれません…。 ブラウザ幅を頻繁に変えたりするのは制作側くらいなので、ユーザー様方は気付かないことのほうが多いでしょうね。。 でも、個人的にはちゃんと切り替わるようになっていて欲しい、と思うのでクライアントワークでは大抵入れてます。
mimimax

2016/04/04 05:54

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

2016/04/04 17:15

とんでもないです、こちらも空き時間にやっているだけですのでお互いさまということで。 (そんな訳で飛び飛びで編集が入って申し訳ないです…通知が何度か行ってしまったかと。。) 是非是非!色々できるようになってくると、なかなか楽しいものだと思います。 JavaScriptにはconsole.log()というメソッドが用意されているので、それを使ってデバッグ(バグ・欠陥を発見および修正する作業)すると良いと思います。 また、Htmlやcssを見直すともっと処理がしやすくなったり、処理を減らしたりすることも多々あります。 この3つはお互いに大きく影響し合うので、それぞれ洗練させていくと更にできることの幅も広がったり面白くなると思います。 恐縮です、また何かあれば何なりと! --- すみません、、追記したコードに1箇所誤記がありました…。 27行目 × dropDownLi(open) → ○ dropDownLi() です。別のやり方を試した際の消し忘れです…修正しておいてください。 ※追記コードも修正しておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問