レスポンシブサイトを目指して、ページを作成している初心者です。
複数個の<li>要素をウィンドウ幅が480px以下の時に、セレクトボックス形式にしたいのですが、うまくいきません。ウィンドウ幅が開いた状態では普通のボタンにしたいので<ul><li>で組んでおります。
開くようには出来たのですが、その後がどうしてもわかりません。
https://jsfiddle.net/yoshidamimi/um2x0sda/1/
したいことは、
(1)3つのセレクトバーそれぞれが別に機能する
(2)セレクト部分が伸びて開いて、選んだボタン(クラス名にis-checkedが追加されたもの)が表示された状態で、セレクト部分が閉じる。
(3)リンクにとぶ訳ではなく、その3つのセレクトバーで選ばれたもの(クラス名にis-checkedがあるもの)の組み合わせで、記事内に出るイラストを変えるボタンになります。
基礎的なことなのかもしれませんが、どうしても理解できずお力をお借りしたいです。
よろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
下記で(1)と(2)は満たせると思います。
あとは(3)ですが、
is-checkedクラスがついた要素を探し、
画像を変えるだけです。
わからないようであれば再度回答します。
JavaScript
1$(window).load(function(){ 2 $(function() { 3 $("li.button:not(.is-checked)").hide(); 4 $("ul.button-group").click(function() { 5 $("li",this).show(); 6 $("li",this).each(function(){ 7 $(this).css( "zIndex", 1 ) 8 }); 9 $("li",this).on( 'click', function() { 10 $(this).parent(".button-group").find('.is-checked').removeClass('is-checked'); 11 $( this ).addClass('is-checked'); 12 $(this).parent(".button-group").children("li.button:not(.is-checked)").hide(); 13 $(this).parent(".button-group").children("li").off('click'); 14 $(this).parent(".button-group").children("li").each(function(){ 15 $(this).css( "zIndex", 0 ); 16 }); 17 return false; 18 }); 19 }); 20 }); 21});
--
追記:
コメントの(1)について回答します。
480以下の場合に処理を実行するのはいいですが、
480を超える場合は追加した処理を消す必要があります。
よって、以下のようにすればよいかと思います。
ただし、このままだと縦並びのままなので、横並びにするよう、
classを付け替えてやる必要があります。
(removeClass&addClass)
JavaScript
1$(window).load(function(){ 2 changeDisplay(); 3}); 4window.onresize = function(){ 5 changeDisplay(); 6} 7function changeSelectedButton(ele){ 8 // もともと選択されていたliからis-checkedクラスを外す 9 $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked'); 10 // 選択したボタンにis-checkedクラスをつける 11 $(ele).addClass('is-checked'); 12} 13function changeDisplay(){ 14 if($(window).width() <= 480){ 15 // 横幅が480以下であれば 16 /* 17 ここに横並び用classを外し、縦並び用classをつける処理を加える 18 */ 19 // 非選択状態のボタンを非表示 20 $("li.button:not(.is-checked)").hide(); 21 22 // ulタグにonclickイベントを付加 23 $("ul.button-group").on('click', function() { 24 // ulがクリックされたら 25 // 非表示にしていたボタンを表示する 26 $("li",this).show(); 27 28 // クリックされたulの中のli全てに処理 29 $("li",this).each(function(){ 30 // 手前に表示するため、zIndexを変更 31 $(this).css( "zIndex", 1 ) 32 }); 33 34 // クリックされたulの中のボタンにonclickイベントを付加 35 $("li",this).on( 'click', function() { 36 // ボタンがクリックされたら 37 // 選択状態を変更する 38 changeSelectedButton(this); 39 40 // 非選択状態のタグを非表示にする 41 $(this).parent(".button-group").children("li.button:not(.is-checked)").hide(); 42 43 // ボタンのonclickを外す 44 $(this).parent(".button-group").children("li").off('click'); 45 46 // 手前に表示するための処理を打ち消す 47 $(this).parent(".button-group").children("li").each(function(){ 48 $(this).css( "zIndex", 0 ); 49 }); 50 51 // ulのonclickが発火しないよう、falseを返す 52 return false; 53 }); 54 }); 55 }else{ 56 // 横幅が480より大きければ 57 // 480以下のときに加えた処理を打ち消します 58 59 // 打ち消し処理ここから 60 // ボタンは全て表示する 61 $("li.button").show(); 62 63 // ulのonclickは不要のため外す 64 $("ul.button-group").off('click') 65 // 打ち消し処理ここまで 66 67 /* 68 ここに縦並び用classを外し、横並び用classをつける処理を加える 69 */ 70 71 } 72}
--
追記2:
ulのonclickが発火しないよう、return falseしていたのが原因ですね。
下記で出来るかと思います。
眠い状態で書いたので間違いあったらごめんなさい。
JavaScript
1$(window).load(function(){ 2 changeDisplay(); 3 $.fn.events = function(){ 4 return $._data( $(this).get(0)).events 5 }; 6}); 7window.onresize = function(){ 8 changeDisplay(); 9} 10function changeSelectedButton(ele){ 11 // もともと選択されていたliからis-checkedクラスを外す 12 $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked'); 13 // 選択したボタンにis-checkedクラスをつける 14 $(ele).addClass('is-checked'); 15} 16 17// liが展開されているかのフラグ 18var showFlag = false; 19// 横幅の前回の値 20var beforeWidth = -1; 21function changeDisplay(){ 22 if(!(beforeWidth <= 480 && $(window).width() <= 480) && !(beforeWidth > 480 && $(window).width() > 480)){ 23 // リサイズ前と後で閾値を跨いでいれば 24 if($(window).width() <= 480){ 25 // 横幅が480以下であれば 26 27 // フラグ初期化 28 showFlag = false; 29 // 非選択状態のボタンを非表示 30 $("li.button:not(.is-checked)").hide(); 31 32 // ulタグにonclickイベントを付加 33 $("ul.button-group").on('click', function(event) { 34 // ulがクリックされたら 35 36 if(!showFlag){ 37 // ボタンが非表示の場合 38 // 非表示にしていたボタンを表示する 39 $("li",this).show(); 40 41 // フラグをたてる 42 showFlag = true; 43 44 // クリックされたulの中のli全てに処理 45 $("li",this).each(function(){ 46 // 手前に表示するため、zIndexを変更 47 $(this).css( "zIndex", 1 ) 48 }); 49 50 // クリックされたulの中のボタンにonclickイベントを付加 51 $("li",this).on( 'click', function() { 52 53 // ボタンがクリックされたら 54 // 選択状態を変更する 55 changeSelectedButton(this); 56 57 // 非選択状態のタグを非表示にする 58 $(this).parent(".button-group").children("li.button:not(.is-checked)").hide(); 59 60 // ボタンのonclickを外す 61 $(this).parent(".button-group").children("li").off('click'); 62 63 // 手前に表示するための処理を打ち消す 64 $(this).parent(".button-group").children("li").each(function(){ 65 $(this).css( "zIndex", 0 ); 66 }); 67 68 // ulのonclickが発火しないよう、falseを返す 69 //return false; 70 }); 71 }else{ 72 showFlag = false; 73 } 74 }); 75 }else{ 76 // 横幅が480より大きければ 77 // 480以下のときに加えた処理を打ち消します 78 79 // 打ち消し処理ここから 80 // ボタンは全て表示する 81 $("li.button").show(); 82 83 // ul、liのonclickは不要のため外す 84 $("ul.button-group").off('click'); 85 $("li.button").off('click'); 86 87 // 打ち消し処理ここまで 88 } 89 } 90 beforeWidth = $(window).width(); 91}
投稿2016/03/25 06:13
編集2016/03/31 18:42総合スコア1507
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/25 09:00
2016/03/26 05:04
2016/03/26 09:22
2016/03/27 04:44
2016/03/28 03:43
2016/03/31 15:17
2016/04/02 16:21