質問: レスポンシブサイトを目指して、ページを作成している初心者です。 複数個の要素をウィンドウ幅が480px以下の時に、セレクトボックス形式にしたいのですが、うまくいきません。ウィンドウ幅が開いた状態では普通のボタンにしたいのでで組んでおります。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/b1a78ce0de35de9b6385a8be4fb66602.png) 開くようには出来たのですが、その後がどうしてもわかりません。 https://jsfiddle.net/yoshidamimi/um2x0sda/1/ したいことは、 (1)3つのセレクトバーそれぞれが別に機能する (2)セレクト部分が伸びて開いて、選んだボタン(クラス名にis-checkedが追加されたもの)が表示された状態で、セレクト部分が閉じる。 (3)リンクにとぶ訳ではなく、その3つのセレクトバーで選ばれたもの(クラス名にis-checkedがあるもの)の組み合わせで、記事内に出るイラストを変えるボタンになります。 基礎的なことなのかもしれませんが、どうしても理解できずお力をお借りしたいです。 よろしくお願いいたします。
回答: 下記で(1)と(2)は満たせると思います。 あとは(3)ですが、 is-checkedクラスがついた要素を探し、 画像を変えるだけです。 わからないようであれば再度回答します。 ``` $(window).load(function(){ $(function() { $("li.button:not(.is-checked)").hide(); $("ul.button-group").click(function() { $("li",this).show(); $("li",this).each(function(){ $(this).css( "zIndex", 1 ) }); $("li",this).on( 'click', function() { $(this).parent(".button-group").find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); $(this).parent(".button-group").children("li.button:not(.is-checked)").hide(); $(this).parent(".button-group").children("li").off('click'); $(this).parent(".button-group").children("li").each(function(){ $(this).css( "zIndex", 0 ); }); return false; }); }); }); }); ``` 追記: コメントの(1)について回答します。 480以下の場合に処理を実行するのはいいですが、 480を超える場合は追加した処理を消す必要があります。 よって、以下のようにすればよいかと思います。 ただし、このままだと縦並びのままなので、横並びにするよう、 classを付け替えてやる必要があります。 (removeClass&addClass) ``` $(window).load(function(){ changeDisplay(); }); window.onresize = function(){ changeDisplay(); } function changeSelectedButton(ele){ // もともと選択されていたliからis-checkedクラスを外す $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked'); // 選択したボタンにis-checkedクラスをつける $(ele).addClass('is-checked'); } function changeDisplay(){ if($(window).width() <= 480){ // 横幅が480以下であれば /* ここに横並び用classを外し、縦並び用classをつける処理を加える */ // 非選択状態のボタンを非表示 $("li.button:not(.is-checked)").hide(); // ulタグにonclickイベントを付加 $("ul.button-group").on('click', function() { // ulがクリックされたら // 非表示にしていたボタンを表示する $("li",this).show(); // クリックされたulの中のli全てに処理 $("li",this).each(function(){ // 手前に表示するため、zIndexを変更 $(this).css( "zIndex", 1 ) }); // クリックされたulの中のボタンにonclickイベントを付加 $("li",this).on( 'click', function() { // ボタンがクリックされたら // 選択状態を変更する changeSelectedButton(this); // 非選択状態のタグを非表示にする $(this).parent(".button-group").children("li.button:not(.is-checked)").hide(); // ボタンのonclickを外す $(this).parent(".button-group").children("li").off('click'); // 手前に表示するための処理を打ち消す $(this).parent(".button-group").children("li").each(function(){ $(this).css( "zIndex", 0 ); }); // ulのonclickが発火しないよう、falseを返す return false; }); }); }else{ // 横幅が480より大きければ // 480以下のときに加えた処理を打ち消します // 打ち消し処理ここから // ボタンは全て表示する $("li.button").show(); // ulのonclickは不要のため外す $("ul.button-group").off('click') // 打ち消し処理ここまで /* ここに縦並び用classを外し、横並び用classをつける処理を加える */ } } ``` 追記2: ulのonclickが発火しないよう、return falseしていたのが原因ですね。 下記で出来るかと思います。 眠い状態で書いたので間違いあったらごめんなさい。 ``` $(window).load(function(){ changeDisplay(); $.fn.events = function(){ return $._data( $(this).get(0)).events }; }); window.onresize = function(){ changeDisplay(); } function changeSelectedButton(ele){ // もともと選択されていたliからis-checkedクラスを外す $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked'); // 選択したボタンにis-checkedクラスをつける $(ele).addClass('is-checked'); } // liが展開されているかのフラグ var showFlag = false; // 横幅の前回の値 var beforeWidth = -1; function changeDisplay(){ if(!(beforeWidth <= 480 && $(window).width() <= 480) && !(beforeWidth > 480 && $(window).width() > 480)){ // リサイズ前と後で閾値を跨いでいれば if($(window).width() <= 480){ // 横幅が480以下であれば // フラグ初期化 showFlag = false; // 非選択状態のボタンを非表示 $("li.button:not(.is-checked)").hide(); // ulタグにonclickイベントを付加 $("ul.button-group").on('click', function(event) { // ulがクリックされたら if(!showFlag){ // ボタンが非表示の場合 // 非表示にしていたボタンを表示する $("li",this).show(); // フラグをたてる showFlag = true; // クリックされたulの中のli全てに処理 $("li",this).each(function(){ // 手前に表示するため、zIndexを変更 $(this).css( "zIndex", 1 ) }); // クリックされたulの中のボタンにonclickイベントを付加 $("li",this).on( 'click', function() { // ボタンがクリックされたら // 選択状態を変更する changeSelectedButton(this); // 非選択状態のタグを非表示にする $(this).parent(".button-group").children("li.button:not(.is-checked)").hide(); // ボタンのonclickを外す $(this).parent(".button-group").children("li").off('click'); // 手前に表示するための処理を打ち消す $(this).parent(".button-group").children("li").each(function(){ $(this).css( "zIndex", 0 ); }); // ulのonclickが発火しないよう、falseを返す //return false; }); }else{ showFlag = false; } }); }else{ // 横幅が480より大きければ // 480以下のときに加えた処理を打ち消します // 打ち消し処理ここから // ボタンは全て表示する $("li.button").show(); // ul、liのonclickは不要のため外す $("ul.button-group").off('click'); $("li.button").off('click'); // 打ち消し処理ここまで } } beforeWidth = $(window).width(); } ```