回答編集履歴

3

ちょうせい

2019/10/11 03:27

投稿

yambejp
yambejp

スコア114829

test CHANGED
@@ -162,23 +162,23 @@
162
162
 
163
163
  ```javascript
164
164
 
165
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
166
+
165
167
  <script>
166
168
 
167
169
  var flg=true;
168
170
 
169
171
  $(function(){
170
172
 
171
- $('.onlabel').on('click',function(){
173
+ $('#gmb13').on('click',function(){
172
174
 
173
175
  if(flg){
174
176
 
175
177
  flg=false;
176
178
 
177
- var val=$(this).text()=="CLOSE"?"OPEN":"CLOSE";
178
-
179
- $(this).text(val);
180
-
181
- if(val=="CLOSE"){
179
+ $(this).toggleClass("CLOSE");
180
+
181
+ if($(this).is(':not(.CLOSE)')){
182
182
 
183
183
  $.when(
184
184
 
@@ -226,7 +226,7 @@
226
226
 
227
227
  <div id="gnavi13">
228
228
 
229
- <div id="gmb13">
229
+ <div id="gmb13">gmb13(仮)
230
230
 
231
231
  <div>
232
232
 
@@ -240,8 +240,6 @@
240
240
 
241
241
  <p class="offlabel">MENU</p>
242
242
 
243
- <p class="onlabel">CLOSE</p>
244
-
245
243
  </div>
246
244
 
247
245
 

2

本番

2019/10/11 03:27

投稿

yambejp
yambejp

スコア114829

test CHANGED
@@ -153,3 +153,121 @@
153
153
  test
154
154
 
155
155
  ```
156
+
157
+
158
+
159
+ # 本番組込版
160
+
161
+
162
+
163
+ ```javascript
164
+
165
+ <script>
166
+
167
+ var flg=true;
168
+
169
+ $(function(){
170
+
171
+ $('.onlabel').on('click',function(){
172
+
173
+ if(flg){
174
+
175
+ flg=false;
176
+
177
+ var val=$(this).text()=="CLOSE"?"OPEN":"CLOSE";
178
+
179
+ $(this).text(val);
180
+
181
+ if(val=="CLOSE"){
182
+
183
+ $.when(
184
+
185
+ $('.gml13 li').each(function(x){
186
+
187
+ $(this).css({"padding-left":100,opacity:0}).delay(200*x).queue(function(){
188
+
189
+ $(this).show().animate({"padding-left":0,opacity:1}).dequeue();
190
+
191
+ })
192
+
193
+ })).done(function(){
194
+
195
+ flg=true;
196
+
197
+ });
198
+
199
+ }else{
200
+
201
+ $.when(
202
+
203
+ $('.gml13 li').each(function(x){
204
+
205
+ $(this).delay(200*($('.gml13 li').length-1-x)).animate({"padding-left":100,opacity:0}).queue(function(){
206
+
207
+ $(this).hide().dequeue();
208
+
209
+ })
210
+
211
+ })).done(function(){
212
+
213
+ flg=true;
214
+
215
+ });
216
+
217
+ }
218
+
219
+ }
220
+
221
+ });
222
+
223
+ });
224
+
225
+ </script>
226
+
227
+ <div id="gnavi13">
228
+
229
+ <div id="gmb13">
230
+
231
+ <div>
232
+
233
+ <span></span>
234
+
235
+ <span></span>
236
+
237
+ <span></span>
238
+
239
+ </div>
240
+
241
+ <p class="offlabel">MENU</p>
242
+
243
+ <p class="onlabel">CLOSE</p>
244
+
245
+ </div>
246
+
247
+
248
+
249
+ <!-- global menu -->
250
+
251
+ <nav>
252
+
253
+ <ul class="gml13 delay-show">
254
+
255
+ <li><a href="index.html">Home</a></li>
256
+
257
+ <li><a href="about.html">マッサージ</a></li>
258
+
259
+ <li><a href="works.html">よもぎ蒸し</a></li>
260
+
261
+ <li><a href="link.html">料金案内</a></li>
262
+
263
+ <li><a href="contact.html">ご相談</a></li>
264
+
265
+ </ul>
266
+
267
+ </nav>
268
+
269
+ </div>
270
+
271
+ <hr>
272
+
273
+ ```

1

ちょうせい

2019/10/11 01:54

投稿

yambejp
yambejp

スコア114829

test CHANGED
@@ -65,3 +65,91 @@
65
65
  test
66
66
 
67
67
  ```
68
+
69
+
70
+
71
+ # 調整版
72
+
73
+ ```javascript
74
+
75
+ <script>
76
+
77
+ var flg=true;
78
+
79
+ $(function(){
80
+
81
+ $('#menu div').hide();
82
+
83
+ $('#btn').on('click',function(){
84
+
85
+ if(flg){
86
+
87
+ flg=false;
88
+
89
+ var val=$(this).text()=="show"?"hide":"show";
90
+
91
+ $(this).text(val);
92
+
93
+ if(val=="hide"){
94
+
95
+ $.when(
96
+
97
+ $('#menu div').each(function(x){
98
+
99
+ $(this).css({"padding-left":100,opacity:0}).delay(200*x).show().animate({"padding-left":0,opacity:1});
100
+
101
+ })).done(function(){
102
+
103
+ flg=true;
104
+
105
+ });
106
+
107
+ }else{
108
+
109
+ $.when(
110
+
111
+ $('#menu div').each(function(x){
112
+
113
+ $(this).delay(200*($('#menu div').length-1-x)).animate({"padding-left":100,opacity:0}).queue(function(){
114
+
115
+ $(this).hide().dequeue();
116
+
117
+ })
118
+
119
+ })).done(function(){
120
+
121
+ flg=true;
122
+
123
+ });
124
+
125
+ }
126
+
127
+ }
128
+
129
+ });
130
+
131
+ });
132
+
133
+ </script>
134
+
135
+ test
136
+
137
+ <div id="btn">show</div>
138
+
139
+ <div id="menu">
140
+
141
+ <div>あああ</div>
142
+
143
+ <div>いいい</div>
144
+
145
+ <div>ううう</div>
146
+
147
+ <div>えええ</div>
148
+
149
+ <div>おおお</div>
150
+
151
+ </div>
152
+
153
+ test
154
+
155
+ ```