回答編集履歴

3 コメント受け追記

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 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 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をつける処理を加える

*/

}

}

```