teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

コメント受け追記

2016/03/31 18:42

投稿

moredeep
moredeep

スコア1507

answer CHANGED
@@ -111,4 +111,102 @@
111
111
 
112
112
  }
113
113
  }
114
+ ```
115
+ --
116
+ 追記2:
117
+ ulのonclickが発火しないよう、return falseしていたのが原因ですね。
118
+ 下記で出来るかと思います。
119
+ 眠い状態で書いたので間違いあったらごめんなさい。
120
+ ```JavaScript
121
+ $(window).load(function(){
122
+ changeDisplay();
123
+ $.fn.events = function(){
124
+ return $._data( $(this).get(0)).events
125
+ };
126
+ });
127
+ window.onresize = function(){
128
+ changeDisplay();
129
+ }
130
+ function changeSelectedButton(ele){
131
+ // もともと選択されていたliからis-checkedクラスを外す
132
+ $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked');
133
+ // 選択したボタンにis-checkedクラスをつける
134
+ $(ele).addClass('is-checked');
135
+ }
136
+
137
+ // liが展開されているかのフラグ
138
+ var showFlag = false;
139
+ // 横幅の前回の値
140
+ var beforeWidth = -1;
141
+ function changeDisplay(){
142
+ if(!(beforeWidth <= 480 && $(window).width() <= 480) && !(beforeWidth > 480 && $(window).width() > 480)){
143
+ // リサイズ前と後で閾値を跨いでいれば
144
+ if($(window).width() <= 480){
145
+ // 横幅が480以下であれば
146
+
147
+ // フラグ初期化
148
+ showFlag = false;
149
+ // 非選択状態のボタンを非表示
150
+ $("li.button:not(.is-checked)").hide();
151
+
152
+ // ulタグにonclickイベントを付加
153
+ $("ul.button-group").on('click', function(event) {
154
+ // ulがクリックされたら
155
+
156
+ if(!showFlag){
157
+ // ボタンが非表示の場合
158
+ // 非表示にしていたボタンを表示する
159
+ $("li",this).show();
160
+
161
+ // フラグをたてる
162
+ showFlag = true;
163
+
164
+ // クリックされたulの中のli全てに処理
165
+ $("li",this).each(function(){
166
+ // 手前に表示するため、zIndexを変更
167
+ $(this).css( "zIndex", 1 )
168
+ });
169
+
170
+ // クリックされたulの中のボタンにonclickイベントを付加
171
+ $("li",this).on( 'click', function() {
172
+
173
+ // ボタンがクリックされたら
174
+ // 選択状態を変更する
175
+ changeSelectedButton(this);
176
+
177
+ // 非選択状態のタグを非表示にする
178
+ $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();
179
+
180
+ // ボタンのonclickを外す
181
+ $(this).parent(".button-group").children("li").off('click');
182
+
183
+ // 手前に表示するための処理を打ち消す
184
+ $(this).parent(".button-group").children("li").each(function(){
185
+ $(this).css( "zIndex", 0 );
186
+ });
187
+
188
+ // ulのonclickが発火しないよう、falseを返す
189
+ //return false;
190
+ });
191
+ }else{
192
+ showFlag = false;
193
+ }
194
+ });
195
+ }else{
196
+ // 横幅が480より大きければ
197
+ // 480以下のときに加えた処理を打ち消します
198
+
199
+ // 打ち消し処理ここから
200
+ // ボタンは全て表示する
201
+ $("li.button").show();
202
+
203
+ // ul、liのonclickは不要のため外す
204
+ $("ul.button-group").off('click');
205
+ $("li.button").off('click');
206
+
207
+ // 打ち消し処理ここまで
208
+ }
209
+ }
210
+ beforeWidth = $(window).width();
211
+ }
114
212
  ```

2

不要コード削除

2016/03/31 18:42

投稿

moredeep
moredeep

スコア1507

answer CHANGED
@@ -103,13 +103,6 @@
103
103
 
104
104
  // ulのonclickは不要のため外す
105
105
  $("ul.button-group").off('click')
106
-
107
- // ボタンのonclickを作成
108
- $("li",this).on( 'click', function() {
109
- // ボタンがクリックされたら
110
- // 選択状態を変更する
111
- changeSelectedButton(this);
112
- });
113
106
  // 打ち消し処理ここまで
114
107
 
115
108
  /*

1

コメントを受け追記

2016/03/26 09:20

投稿

moredeep
moredeep

スコア1507

answer CHANGED
@@ -8,38 +8,114 @@
8
8
 
9
9
  ```JavaScript
10
10
  $(window).load(function(){
11
- $(function() {
11
+ $(function() {
12
- $("li.button:not(.is-checked)").hide();
12
+ $("li.button:not(.is-checked)").hide();
13
- $("ul.button-group").click(function() {
13
+ $("ul.button-group").click(function() {
14
- $("li",this).show();
14
+ $("li",this).show();
15
- $("li",this).each(function(){
15
+ $("li",this).each(function(){
16
- $(this).css( "zIndex", 1 )
16
+ $(this).css( "zIndex", 1 )
17
- });
18
- $("li",this).on( 'click', function() {
19
- $(this).parent(".button-group").find('.is-checked').removeClass('is-checked');
20
- $( this ).addClass('is-checked');
21
- $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();
22
- $(this).parent(".button-group").children("li").off('click');
23
- $(this).parent(".button-group").children("li").each(function(){
24
- $(this).css( "zIndex", 0 );
25
17
  });
18
+ $("li",this).on( 'click', function() {
19
+ $(this).parent(".button-group").find('.is-checked').removeClass('is-checked');
20
+ $( this ).addClass('is-checked');
21
+ $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();
22
+ $(this).parent(".button-group").children("li").off('click');
23
+ $(this).parent(".button-group").children("li").each(function(){
24
+ $(this).css( "zIndex", 0 );
25
+ });
26
- return false;
26
+ return false;
27
+ });
27
28
  });
28
29
  });
29
30
  });
30
- /*
31
+ ```
32
+ --
33
+ 追記:
34
+ コメントの(1)について回答します。
35
+ 480以下の場合に処理を実行するのはいいですが、
31
- // change is-checked class on buttons
36
+ 480を超える場合は追加した処理を消す必要があります。
32
- $('.button-group').each( function( i, buttonGroup ) {
37
+ よって、以下のようにすればよいかと思います。
33
- var $buttonGroup = $( buttonGroup );
38
+ ただし、このままだと縦並びのままなので、横並びにするよう、
34
- $buttonGroup.on( 'click', 'li', function() {
39
+ classを付け替えてやる必要があります。
35
- $buttonGroup.find('.is-checked').removeClass('is-checked');
36
- $( this ).addClass('is-checked');
40
+ (removeClass&addClass)
41
+ ```JavaScript
37
- $buttonGroup.children(li).hide();
42
+ $(window).load(function(){
38
- $buttonGroup.off('click', 'li', this);
43
+ changeDisplay();
39
- });
40
44
  });
45
+ window.onresize = function(){
46
+ changeDisplay();
47
+ }
48
+ function changeSelectedButton(ele){
49
+ // もともと選択されていたliからis-checkedクラスを外す
50
+ $(ele).parent(".button-group").find('.is-checked').removeClass('is-checked');
51
+ // 選択したボタンにis-checkedクラスをつける
52
+ $(ele).addClass('is-checked');
53
+ }
54
+ function changeDisplay(){
55
+ if($(window).width() <= 480){
56
+ // 横幅が480以下であれば
57
+ /*
58
+ ここに横並び用classを外し、縦並び用classをつける処理を加える
41
- */
59
+ */
60
+ // 非選択状態のボタンを非表示
61
+ $("li.button:not(.is-checked)").hide();
62
+
63
+ // ulタグにonclickイベントを付加
64
+ $("ul.button-group").on('click', function() {
65
+ // ulがクリックされたら
66
+ // 非表示にしていたボタンを表示する
67
+ $("li",this).show();
68
+
69
+ // クリックされたulの中のli全てに処理
70
+ $("li",this).each(function(){
71
+ // 手前に表示するため、zIndexを変更
72
+ $(this).css( "zIndex", 1 )
73
+ });
74
+
75
+ // クリックされたulの中のボタンにonclickイベントを付加
76
+ $("li",this).on( 'click', function() {
77
+ // ボタンがクリックされたら
78
+ // 選択状態を変更する
79
+ changeSelectedButton(this);
80
+
81
+ // 非選択状態のタグを非表示にする
82
+ $(this).parent(".button-group").children("li.button:not(.is-checked)").hide();
42
83
 
84
+ // ボタンのonclickを外す
85
+ $(this).parent(".button-group").children("li").off('click');
43
86
 
87
+ // 手前に表示するための処理を打ち消す
88
+ $(this).parent(".button-group").children("li").each(function(){
89
+ $(this).css( "zIndex", 0 );
44
- });
90
+ });
91
+
92
+ // ulのonclickが発火しないよう、falseを返す
93
+ return false;
94
+ });
95
+ });
96
+ }else{
97
+ // 横幅が480より大きければ
98
+ // 480以下のときに加えた処理を打ち消します
99
+
100
+ // 打ち消し処理ここから
101
+ // ボタンは全て表示する
102
+ $("li.button").show();
103
+
104
+ // ulのonclickは不要のため外す
105
+ $("ul.button-group").off('click')
106
+
107
+ // ボタンのonclickを作成
108
+ $("li",this).on( 'click', function() {
109
+ // ボタンがクリックされたら
110
+ // 選択状態を変更する
111
+ changeSelectedButton(this);
112
+ });
113
+ // 打ち消し処理ここまで
114
+
115
+ /*
116
+ ここに縦並び用classを外し、横並び用classをつける処理を加える
117
+ */
118
+
119
+ }
120
+ }
45
121
  ```