回答編集履歴

3

コメント受け追記

2016/03/31 18:42

投稿

moredeep
moredeep

スコア1507

test CHANGED
@@ -225,3 +225,199 @@
225
225
  }
226
226
 
227
227
  ```
228
+
229
+ --
230
+
231
+ 追記2:
232
+
233
+ ulのonclickが発火しないよう、return falseしていたのが原因ですね。
234
+
235
+ 下記で出来るかと思います。
236
+
237
+ 眠い状態で書いたので間違いあったらごめんなさい。
238
+
239
+ ```JavaScript
240
+
241
+ $(window).load(function(){
242
+
243
+ changeDisplay();
244
+
245
+ $.fn.events = function(){
246
+
247
+ return $._data( $(this).get(0)).events
248
+
249
+ };
250
+
251
+ });
252
+
253
+ window.onresize = function(){
254
+
255
+ changeDisplay();
256
+
257
+ }
258
+
259
+ function changeSelectedButton(ele){
260
+
261
+ // もともと選択されていたliからis-checkedクラスを外す
262
+
263
+ $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked');
264
+
265
+ // 選択したボタンにis-checkedクラスをつける
266
+
267
+ $(ele).addClass('is-checked');
268
+
269
+ }
270
+
271
+
272
+
273
+ // liが展開されているかのフラグ
274
+
275
+ var showFlag = false;
276
+
277
+ // 横幅の前回の値
278
+
279
+ var beforeWidth = -1;
280
+
281
+ function changeDisplay(){
282
+
283
+ if(!(beforeWidth <= 480 && $(window).width() <= 480) && !(beforeWidth > 480 && $(window).width() > 480)){
284
+
285
+ // リサイズ前と後で閾値を跨いでいれば
286
+
287
+ if($(window).width() <= 480){
288
+
289
+ // 横幅が480以下であれば
290
+
291
+
292
+
293
+ // フラグ初期化
294
+
295
+ showFlag = false;
296
+
297
+ // 非選択状態のボタンを非表示
298
+
299
+ $("li.button:not(.is-checked)").hide();
300
+
301
+
302
+
303
+ // ulタグにonclickイベントを付加
304
+
305
+ $("ul.button-group").on('click', function(event) {
306
+
307
+ // ulがクリックされたら
308
+
309
+
310
+
311
+ if(!showFlag){
312
+
313
+ // ボタンが非表示の場合
314
+
315
+ // 非表示にしていたボタンを表示する
316
+
317
+ $("li",this).show();
318
+
319
+
320
+
321
+ // フラグをたてる
322
+
323
+ showFlag = true;
324
+
325
+
326
+
327
+ // クリックされたulの中のli全てに処理
328
+
329
+ $("li",this).each(function(){
330
+
331
+ // 手前に表示するため、zIndexを変更
332
+
333
+ $(this).css( "zIndex", 1 )
334
+
335
+ });
336
+
337
+
338
+
339
+ // クリックされたulの中のボタンにonclickイベントを付加
340
+
341
+ $("li",this).on( 'click', function() {
342
+
343
+
344
+
345
+ // ボタンがクリックされたら
346
+
347
+ // 選択状態を変更する
348
+
349
+ changeSelectedButton(this);
350
+
351
+
352
+
353
+ // 非選択状態のタグを非表示にする
354
+
355
+ $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();
356
+
357
+
358
+
359
+ // ボタンのonclickを外す
360
+
361
+ $(this).parent(".button-group").children("li").off('click');
362
+
363
+
364
+
365
+ // 手前に表示するための処理を打ち消す
366
+
367
+ $(this).parent(".button-group").children("li").each(function(){
368
+
369
+ $(this).css( "zIndex", 0 );
370
+
371
+ });
372
+
373
+
374
+
375
+ // ulのonclickが発火しないよう、falseを返す
376
+
377
+ //return false;
378
+
379
+ });
380
+
381
+ }else{
382
+
383
+ showFlag = false;
384
+
385
+ }
386
+
387
+ });
388
+
389
+ }else{
390
+
391
+ // 横幅が480より大きければ
392
+
393
+ // 480以下のときに加えた処理を打ち消します
394
+
395
+
396
+
397
+ // 打ち消し処理ここから
398
+
399
+ // ボタンは全て表示する
400
+
401
+ $("li.button").show();
402
+
403
+
404
+
405
+ // ul、liのonclickは不要のため外す
406
+
407
+ $("ul.button-group").off('click');
408
+
409
+ $("li.button").off('click');
410
+
411
+
412
+
413
+ // 打ち消し処理ここまで
414
+
415
+ }
416
+
417
+ }
418
+
419
+ beforeWidth = $(window).width();
420
+
421
+ }
422
+
423
+ ```

2

不要コード削除

2016/03/31 18:42

投稿

moredeep
moredeep

スコア1507

test CHANGED
@@ -208,20 +208,6 @@
208
208
 
209
209
  $("ul.button-group").off('click')
210
210
 
211
-
212
-
213
- // ボタンのonclickを作成
214
-
215
- $("li",this).on( 'click', function() {
216
-
217
- // ボタンがクリックされたら
218
-
219
- // 選択状態を変更する
220
-
221
- changeSelectedButton(this);
222
-
223
- });
224
-
225
211
  // 打ち消し処理ここまで
226
212
 
227
213
 

1

コメントを受け追記

2016/03/26 09:20

投稿

moredeep
moredeep

スコア1507

test CHANGED
@@ -18,72 +18,224 @@
18
18
 
19
19
  $(window).load(function(){
20
20
 
21
- $(function() {
21
+ $(function() {
22
-
22
+
23
- $("li.button:not(.is-checked)").hide();
23
+ $("li.button:not(.is-checked)").hide();
24
-
24
+
25
- $("ul.button-group").click(function() {
25
+ $("ul.button-group").click(function() {
26
-
26
+
27
- $("li",this).show();
27
+ $("li",this).show();
28
-
28
+
29
- $("li",this).each(function(){
29
+ $("li",this).each(function(){
30
-
30
+
31
- $(this).css( "zIndex", 1 )
31
+ $(this).css( "zIndex", 1 )
32
+
33
+ });
34
+
35
+ $("li",this).on( 'click', function() {
36
+
37
+ $(this).parent(".button-group").find('.is-checked').removeClass('is-checked');
38
+
39
+ $( this ).addClass('is-checked');
40
+
41
+ $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();
42
+
43
+ $(this).parent(".button-group").children("li").off('click');
44
+
45
+ $(this).parent(".button-group").children("li").each(function(){
46
+
47
+ $(this).css( "zIndex", 0 );
48
+
49
+ });
50
+
51
+ return false;
52
+
53
+ });
32
54
 
33
55
  });
34
56
 
57
+ });
58
+
59
+ });
60
+
61
+ ```
62
+
63
+ --
64
+
65
+ 追記:
66
+
67
+ コメントの(1)について回答します。
68
+
69
+ 480以下の場合に処理を実行するのはいいですが、
70
+
71
+ 480を超える場合は追加した処理を消す必要があります。
72
+
73
+ よって、以下のようにすればよいかと思います。
74
+
75
+ ただし、このままだと縦並びのままなので、横並びにするよう、
76
+
77
+ classを付け替えてやる必要があります。
78
+
79
+ (removeClass&addClass)
80
+
81
+ ```JavaScript
82
+
83
+ $(window).load(function(){
84
+
85
+ changeDisplay();
86
+
87
+ });
88
+
89
+ window.onresize = function(){
90
+
91
+ changeDisplay();
92
+
93
+ }
94
+
95
+ function changeSelectedButton(ele){
96
+
97
+ // もともと選択されていたliからis-checkedクラスを外す
98
+
99
+ $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked');
100
+
101
+ // 選択したボタンにis-checkedクラスをつける
102
+
103
+ $(ele).addClass('is-checked');
104
+
105
+ }
106
+
107
+ function changeDisplay(){
108
+
109
+ if($(window).width() <= 480){
110
+
111
+ // 横幅が480以下であれば
112
+
113
+ /*
114
+
115
+ ここに横並び用classを外し、縦並び用classをつける処理を加える
116
+
117
+ */
118
+
119
+ // 非選択状態のボタンを非表示
120
+
121
+ $("li.button:not(.is-checked)").hide();
122
+
123
+
124
+
125
+ // ulタグにonclickイベントを付加
126
+
127
+ $("ul.button-group").on('click', function() {
128
+
129
+ // ulがクリックされたら
130
+
131
+ // 非表示にしていたボタンを表示する
132
+
133
+ $("li",this).show();
134
+
135
+
136
+
137
+ // クリックされたulの中のli全てに処理
138
+
139
+ $("li",this).each(function(){
140
+
141
+ // 手前に表示するため、zIndexを変更
142
+
143
+ $(this).css( "zIndex", 1 )
144
+
145
+ });
146
+
147
+
148
+
149
+ // クリックされたulの中のボタンにonclickイベントを付加
150
+
151
+ $("li",this).on( 'click', function() {
152
+
153
+ // ボタンがクリックされたら
154
+
155
+ // 選択状態を変更する
156
+
157
+ changeSelectedButton(this);
158
+
159
+
160
+
161
+ // 非選択状態のタグを非表示にする
162
+
163
+ $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();
164
+
165
+
166
+
167
+ // ボタンのonclickを外す
168
+
169
+ $(this).parent(".button-group").children("li").off('click');
170
+
171
+
172
+
173
+ // 手前に表示するための処理を打ち消す
174
+
175
+ $(this).parent(".button-group").children("li").each(function(){
176
+
177
+ $(this).css( "zIndex", 0 );
178
+
179
+ });
180
+
181
+
182
+
183
+ // ulのonclickが発火しないよう、falseを返す
184
+
185
+ return false;
186
+
187
+ });
188
+
189
+ });
190
+
191
+ }else{
192
+
193
+ // 横幅が480より大きければ
194
+
195
+ // 480以下のときに加えた処理を打ち消します
196
+
197
+
198
+
199
+ // 打ち消し処理ここから
200
+
201
+ // ボタンは全て表示する
202
+
203
+ $("li.button").show();
204
+
205
+
206
+
207
+ // ulのonclickは不要のため外す
208
+
209
+ $("ul.button-group").off('click')
210
+
211
+
212
+
213
+ // ボタンのonclickを作成
214
+
35
215
  $("li",this).on( 'click', function() {
36
216
 
37
- $(this).parent(".button-group").find('.is-checked').removeClass('is-checked');
38
-
39
- $( this ).addClass('is-checked');
217
+ // ボタンがクリックされたら
40
-
41
- $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();
218
+
42
-
43
- $(this).parent(".button-group").children("li").off('click');
219
+ // 選択状態を変更する
44
-
45
- $(this).parent(".button-group").children("li").each(function(){
220
+
46
-
47
- $(this).css( "zIndex", 0 );
221
+ changeSelectedButton(this);
48
-
49
- });
50
-
51
- return false;
52
222
 
53
223
  });
54
224
 
55
- });
225
+ // 打ち消し処理ここまで
56
-
57
- });
226
+
58
-
227
+
228
+
59
- /*
229
+ /*
60
-
230
+
61
- // change is-checked class on buttons
231
+ ここに縦並び用classを外し、横並び用classをつける処理を加える
62
-
63
- $('.button-group').each( function( i, buttonGroup ) {
232
+
64
-
65
- var $buttonGroup = $( buttonGroup );
66
-
67
- $buttonGroup.on( 'click', 'li', function() {
68
-
69
- $buttonGroup.find('.is-checked').removeClass('is-checked');
70
-
71
- $( this ).addClass('is-checked');
72
-
73
- $buttonGroup.children(li).hide();
74
-
75
- $buttonGroup.off('click', 'li', this);
76
-
77
- });
78
-
79
- });
80
-
81
- */
233
+ */
82
-
83
-
84
-
85
-
86
-
234
+
235
+
236
+
87
- });
237
+ }
238
+
239
+ }
88
240
 
89
241
  ```