回答編集履歴

3 コメント受け追記

moredeep

moredeep score 1489

2016/04/01 03:42  投稿

下記で(1)と(2)は満たせると思います。
あとは(3)ですが、
is-checkedクラスがついた要素を探し、
画像を変えるだけです。
わからないようであれば再度回答します。
```JavaScript
$(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)
```JavaScript
$(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していたのが原因ですね。  
下記で出来るかと思います。  
眠い状態で書いたので間違いあったらごめんなさい。  
```JavaScript  
$(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();  
}  
```
2 不要コード削除

moredeep

moredeep score 1489

2016/03/26 18:20  投稿

下記で(1)と(2)は満たせると思います。
あとは(3)ですが、
is-checkedクラスがついた要素を探し、
画像を変えるだけです。
わからないようであれば再度回答します。
```JavaScript
$(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)
```JavaScript
$(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')
     
   // ボタンのonclickを作成  
   $("li",this).on( 'click', function() {  
     // ボタンがクリックされたら  
     // 選択状態を変更する  
     changeSelectedButton(this);  
   });  
   // 打ち消し処理ここまで
   
   /*
     ここに縦並び用classを外し、横並び用classをつける処理を加える
   */
 }
}
```
1 コメントを受け追記

moredeep

moredeep score 1489

2016/03/26 18:16  投稿

下記で(1)と(2)は満たせると思います。
あとは(3)ですが、
is-checkedクラスがついた要素を探し、
画像を変えるだけです。
わからないようであれば再度回答します。
```JavaScript
$(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 );
 $(function() {
   $("li.button:not(.is-checked)").hide();
   $("ul.button-group").click(function() {
     $("li",this).show();
     $("li",this).each(function(){
         $(this).css( "zIndex", 1 )
     });
     return false;
     $("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;
     });
   });
 });
});
/*
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
 var $buttonGroup = $( buttonGroup );
 $buttonGroup.on( 'click', 'li', function() {
   $buttonGroup.find('.is-checked').removeClass('is-checked');
   $( this ).addClass('is-checked');
   $buttonGroup.children(li).hide();
   $buttonGroup.off('click', 'li', this);
 });
```
--
追記:
コメントの(1)について回答します。
480以下の場合に処理を実行するのはいいですが、
480を超える場合は追加した処理を消す必要があります。
よって、以下のようにすればよいかと思います。
ただし、このままだと縦並びのままなので、横並びにするよう、
classを付け替えてやる必要があります。
(removeClass&addClass)
```JavaScript
$(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')
   
   // ボタンのonclickを作成
   $("li",this).on( 'click', function() {
     // ボタンがクリックされたら
     // 選択状態を変更する
     changeSelectedButton(this);
   });
   // 打ち消し処理ここまで
   
   /*
     ここに縦並び用classを外し、横並び用classをつける処理を加える
   */
 }
}
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る