teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問flickSliderの画像自動送り時にdrawerのサイドメニューが閉じてしまう。

編集履歴

質問編集履歴

9

コードの再記入と現在の状態

2019/02/15 09:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes

8

追記説明

2019/02/15 09:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,10 @@
1
1
  2/15編集
2
2
 
3
- 回答頂いた点、リストの入れ子を見直し修正したコードに貼り換えました。
3
+ 下記で回答頂いた点、リストの入れ子を見直し修正したコードに貼り換えました。
4
+
5
+
6
+
7
+ (CSSとJSが増えていますが、ひとつづつ外してみて今回の問題には関係ないものと思ったので記述していなかったものです。念のため全て記入してみました。)
4
8
 
5
9
 
6
10
 
@@ -8,6 +12,18 @@
8
12
 
9
13
 
10
14
 
15
+ 回答にて、
16
+
17
+ <li class="drawer-dropdown"><a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">&#062;カテゴリー<span class="drawer-caret"></span></a>
18
+
19
+ この部分が、時間経過でスライドするときに変化してしまっていて、<li>と<ul>の入れ子がおかしいせいだというアドバイス頂き修正してみましたが、まだ干渉してドロップダウンが勝手に閉じてしまいます。
20
+
21
+ リストは修正できたと思うのですが…。
22
+
23
+
24
+
25
+
26
+
11
27
  【flickSlider参考ページ】
12
28
 
13
29
  http://black-flag.net/jquery/20130514-4588.html
@@ -326,10 +342,4 @@
326
342
 
327
343
  途中省略しておりますが、このような構成です。
328
344
 
329
-
330
-
331
-
332
-
333
-
334
-
335
- 何卒宜しくお願い致します。
345
+ 助言頂けますとありがたいです。何卒宜しくお願い致します。

7

コードの書き換え

2019/02/15 09:27

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- nivosliderの画像自動送り時にdrawerのサイドメニューが閉じてしまう。
1
+ flickSliderの画像自動送り時にdrawerのサイドメニューが閉じてしまう。
test CHANGED
@@ -1,26 +1,6 @@
1
- 2/13追記
1
+ 2/15編集
2
-
2
+
3
- コメント頂いた点、jqueryが複数回読まれている点について確認・修正いたしました。
3
+ 回答頂いた点、リストの入れ子を見直し修正したコードに貼り換えました。
4
-
5
- スライダーとして使用しているものがnivosliderではなくflickSliderでしたので、その点を修正しました。
6
-
7
-
8
-
9
- 1/7
10
-
11
- 質問させて頂いた内容の実現方法について考えたのですが、
12
-
13
- 【あるJSの実行中は、他のある挙動を実行させないようにする】
14
-
15
- というようなJSの処理？が書き込めれば
16
-
17
-
18
-
19
- サイドメニューを開いたときは、スライドを停止させる
20
-
21
-
22
-
23
- といった事ができるのではと思ったのですが、そのようなことは可能でしょうか…。
24
4
 
25
5
 
26
6
 
@@ -52,24 +32,54 @@
52
32
 
53
33
 
54
34
 
35
+
36
+
55
37
  <!-- jS読み込み -->
56
38
 
57
39
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
58
40
 
41
+
42
+
43
+ <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.js"></script>
44
+
45
+
46
+
59
47
  <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/sp.js"></script>
60
48
 
49
+
50
+
61
51
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
62
52
 
53
+
54
+
63
55
  <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
64
56
 
65
57
 
66
58
 
67
59
 
68
60
 
61
+
62
+
69
63
  <!-- CSS読み込み -->
70
64
 
71
65
 
72
66
 
67
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/css/gmenu.css" media="all" />
68
+
69
+
70
+
71
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.css" media="all" />
72
+
73
+
74
+
75
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/base.css" media="all" />
76
+
77
+
78
+
79
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/common.css" media="all" />
80
+
81
+
82
+
73
83
  <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.min.css">
74
84
 
75
85
 
@@ -82,9 +92,23 @@
82
92
 
83
93
  <div class="drawer drawer--left">
84
94
 
85
-
86
-
87
- <nav class="drawer-nav">
95
+ <header role="banner">
96
+
97
+ <!-- ハンバーガーボタン -->
98
+
99
+
100
+
101
+ <button type="button" class="drawer-toggle drawer-hamburger">
102
+
103
+ <span class="sr-only">toggle navigation</span>
104
+
105
+ <span class="drawer-hamburger-icon"></span>
106
+
107
+ </button>
108
+
109
+ <!-- ナビゲーションの中身 -->
110
+
111
+ <nav class="drawer-nav" role="navigation">
88
112
 
89
113
  <ul class="drawer-menu">
90
114
 
@@ -106,43 +130,47 @@
106
130
 
107
131
  <li class="drawer-design1"><a href="#">&#062;新作アイテム</a></li>
108
132
 
133
+
134
+
135
+
136
+
109
- <ul class="drawer-menu">
137
+ <!-- ドロップダウンの中身 -->
110
-
111
- <li class="drawer-dropdown">
138
+
112
-
113
- <a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">&#062;カテゴリー<span class="drawer-caret"></span></a>
139
+ <li class="drawer-dropdown"><a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">&#062;カテゴリー<span class="drawer-caret"></span></a>
114
140
 
115
141
  <ul class="drawer-dropdown-menu">
116
142
 
117
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">カテゴリ1</font></a></li>
143
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ワンピース</font></a></li>
118
-
144
+
119
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">カテゴリ2</font></a></li>
145
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">トップス</font></a></li>
120
146
 
121
147
  </ul>
122
148
 
123
149
  </li>
124
150
 
125
- <ul class="drawer-menu">
151
+
126
-
127
- <li class="drawer-dropdown">
152
+
128
-
129
- <a class="drawer-menu-item drawer-design11" data-toggle="dropdown" role="button" aria-expanded="false">&#062;ブランド<span class="drawer-caret"></span></a>
153
+ <li class="drawer-dropdown"><a class="drawer-menu-item drawer-design11" data-toggle="dropdown" role="button" aria-expanded="false">&#062;ブランド<span class="drawer-caret"></span></a>
130
154
 
131
155
  <ul class="drawer-dropdown-menu">
132
156
 
133
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド1</font></a></li>
157
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">小ブランド1</font></a></li>
134
-
158
+
135
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド2</font></a></li>
159
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">小ブランド2</font></a></li>
136
160
 
137
161
  </ul>
138
162
 
139
163
  </li>
140
164
 
165
+
166
+
141
167
  </ul>
142
168
 
143
169
  </nav>
144
170
 
145
-
171
+ </header>
172
+
173
+ </div>
146
174
 
147
175
 
148
176
 
@@ -158,11 +186,11 @@
158
186
 
159
187
 
160
188
 
189
+ <script>
190
+
161
- <script type="text/javascript">
191
+ $(".drawer-dropdown-menu a").on("click", function (e) {
162
-
192
+
163
- jQuery(function($) {
193
+ e.stopPropagation();
164
-
165
- $(".swipebox").swipebox();
166
194
 
167
195
  });
168
196
 
@@ -170,152 +198,122 @@
170
198
 
171
199
 
172
200
 
173
- <script>
174
-
175
- $(".drawer-dropdown-menu a").on("click", function (e) {
176
-
177
- e.stopPropagation();
178
-
179
- });
180
-
181
- </script>
182
-
183
-
184
-
185
- <button type="button" class="drawer-toggle drawer-hamburger">
186
-
187
- <span class="sr-only">toggle navigation</span>
188
-
189
- <span class="drawer-hamburger-icon"></span>
201
+ <div class="body-bk"></div>
202
+
203
+
204
+
190
-
205
+ <!-- ボディ部分 -->
206
+
207
+ <!-- topスライダーnivo-slider用 -->
208
+
209
+ <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/jqueryslider.js"></script>
210
+
211
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/nivo-slider.css" media="all" />
212
+
213
+
214
+
215
+ <!-- topスライダー画像用 -->
216
+
217
+
218
+
219
+
220
+
221
+ <div class="flickSlider">
222
+
223
+
224
+
225
+ <div class="flickView">
226
+
227
+
228
+
229
+ <ul><!-- スマートフォン大画像 -->
230
+
231
+ <li><a href="#"><img src="#" alt="" /></a></li>
232
+
233
+ <li><a href="#"><img src="#" alt="" /></a></li>
234
+
235
+ <li><a href="#"><img src="#" alt="" /></a></li>
236
+
237
+ <li><a href="#"><img src="#" alt="" /></a></li>
238
+
239
+
240
+
191
- </button>
241
+ </ul>
242
+
192
-
243
+ </div><!--/.flickView-->
244
+
245
+
246
+
193
-
247
+ <div class="flickThumb">
248
+
249
+ <ul>
250
+
251
+ <li>●</li>
252
+
253
+ <li>●</li>
254
+
255
+ <li>●</li>
256
+
257
+ <li>●</li>
258
+
259
+ </ul>
260
+
261
+ </div><!--/.flickThumb-->
262
+
263
+ </div><!--/.flickSlider-->
264
+
265
+
266
+
267
+ <!-- ボディ終わり -->
268
+
269
+
270
+
271
+ <!--フッター-->
272
+
273
+
274
+
275
+ <!-- ヘッダー看板 -->
276
+
277
+
278
+
279
+ <div id="header-fixed">
280
+
281
+ <div id="header-bk">
282
+
283
+ <div class="headerbox">
284
+
285
+ <table>
286
+
287
+ <tr><td>
288
+
289
+ <a href="#"><img src="#" width="100%"></a>
290
+
291
+ </td>
292
+
293
+ <td>
294
+
295
+ <a href="#"><img src="#" width="100%"></a>
296
+
297
+ </td>
298
+
299
+ <td>
300
+
301
+ <a href="#"><img src="#" width="100%"></a>
302
+
303
+ </td>
304
+
305
+ </table>
194
306
 
195
307
  </div>
196
308
 
197
-
198
-
199
- <div class="body-bk"></div>
200
-
201
-
202
-
203
- <!-- ボディ部分 -->
204
-
205
- <!-- topスライダーnivo-slider用 -->
206
-
207
- <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/jqueryslider.js"></script>
208
-
209
- <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/nivo-slider.css" media="all" />
210
-
211
-
212
-
213
- <!-- topスライダー画像用 -->
214
-
215
-
216
-
217
-
218
-
219
- <div class="flickSlider">
220
-
221
-
222
-
223
- <div class="flickView">
224
-
225
-
226
-
227
- <ul><!-- スマートフォン大画像 -->
228
-
229
- <li><a href="#"><img src="#" alt="" /></a></li>
230
-
231
- <li><a href="#"><img src="#" alt="" /></a></li>
232
-
233
- <li><a href="#"><img src="#" alt="" /></a></li>
234
-
235
- <li><a href="#"><img src="#" alt="" /></a></li>
236
-
237
-
238
-
239
- </ul>
240
-
241
- </div><!--/.flickView-->
242
-
243
-
244
-
245
- <div class="flickThumb">
246
-
247
- <ul>
248
-
249
- <li>●</li>
250
-
251
- <li>●</li>
252
-
253
- <li>●</li>
254
-
255
- <li>●</li>
256
-
257
- </ul>
258
-
259
- </div><!--/.flickThumb-->
260
-
261
- </div><!--/.flickSlider-->
262
-
263
-
264
-
265
- <!-- ボディ終わり -->
266
-
267
-
268
-
269
- <!--フッター-->
270
-
271
-
272
-
273
- <!-- ヘッダー看板 -->
274
-
275
-
276
-
277
- <div id="header-fixed">
278
-
279
- <div id="header-bk">
280
-
281
- <div class="headerbox">
282
-
283
- <table>
284
-
285
- <tr><td>
286
-
287
- <a href="#"><img src="#" width="100%"></a>
288
-
289
- </td>
290
-
291
- <td>
292
-
293
- <a href="#"><img src="#" width="100%"></a>
294
-
295
- </td>
296
-
297
- <td>
298
-
299
- <a href="#"><img src="#" width="100%"></a>
300
-
301
- </td>
302
-
303
- </table>
304
-
305
309
  </div>
306
310
 
307
311
  </div>
308
312
 
309
- </div>
310
-
311
313
 
312
314
 
313
315
  <!-- ヘッダー看板終わり -->
314
316
 
315
-
316
-
317
-
318
-
319
317
  <!-- フッタコメント終わり -->
320
318
 
321
319
 
@@ -326,42 +324,12 @@
326
324
 
327
325
 
328
326
 
329
- 途中省略しておりますが、このような構成です。ちなみに自分では、
327
+ 途中省略しておりますが、このような構成です。
330
-
331
-
332
-
333
- <script>
328
+
334
-
335
- $(".drawer-dropdown-menu a").on("click", function (e) {
329
+
336
-
337
- $('#slider').data('nivoslider').stop();
330
+
338
-
339
- };
331
+
340
-
341
- </script>
332
+
342
-
343
-
344
-
345
- だったり、
333
+
346
-
347
-
348
-
349
- <script>
350
-
351
-
352
-
353
- $(".drawer-dropdown-menu a").on("click", function (e) {
354
-
355
- $('#slider').nivoslider({manualAdvance: false,});
356
-
357
- });
358
-
359
-
360
-
361
- </script>
362
-
363
-
364
-
365
- を試してみましたがいまのところ動きません。
366
334
 
367
335
  何卒宜しくお願い致します。

6

使用JSに誤りがあったため修正

2019/02/15 09:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  コメント頂いた点、jqueryが複数回読まれている点について確認・修正いたしました。
4
4
 
5
+ スライダーとして使用しているものがnivosliderではなくflickSliderでしたので、その点を修正しました。
6
+
5
7
 
6
8
 
7
9
  1/7
@@ -22,7 +24,13 @@
22
24
 
23
25
 
24
26
 
25
- お世話になっております。drawerと同じページで使用しているnivosliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
27
+ お世話になっております。drawerと同じページで使用しているflickSliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
28
+
29
+
30
+
31
+ 【flickSlider参考ページ】
32
+
33
+ http://black-flag.net/jquery/20130514-4588.html
26
34
 
27
35
 
28
36
 

5

コードの修正

2019/02/13 06:05

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
- 2/8追記
1
+ 2/13追記
2
-
2
+
3
- コメント頂いたため、実際のページの流れに沿って構成コードを書き直し致しました。
3
+ コメント頂いた点、jqueryが複数回読まれている点について確認・修正いたしました。
4
4
 
5
5
 
6
6
 
@@ -44,12 +44,6 @@
44
44
 
45
45
 
46
46
 
47
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
48
-
49
-
50
-
51
-
52
-
53
47
  <!-- jS読み込み -->
54
48
 
55
49
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

4

画像URL修正

2019/02/13 01:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -224,13 +224,13 @@
224
224
 
225
225
  <ul><!-- スマートフォン大画像 -->
226
226
 
227
- <li><a href="http://www.cambio-w.com/fs/lady/c/sale"><img src="http://www.cambio-w.com/topgazou/smartphone1.jpg" alt="" /></a></li>
227
+ <li><a href="#"><img src="#" alt="" /></a></li>
228
-
228
+
229
- <li><a href="http://www.cambio-w.com/fs/lady/c/ungrid19ss"><img src="http://www.cambio-w.com/topgazou/smartphone4.jpg" alt="" /></a></li>
229
+ <li><a href="#"><img src="#" alt="" /></a></li>
230
-
231
- <li><a href="http://www.cambio-w.com/fs/lady/c/lily_brown19ss"><img src="http://www.cambio-w.com/topgazou/smartphone2.jpg" alt="" /></a></li>
230
+
232
-
233
- <li><a href="http://www.cambio-w.com/fs/lady/c/osmosis18aw"><img src="http://www.cambio-w.com/topgazou/smartphone3.jpg" alt="" /></a></li>
231
+ <li><a href="#"><img src="#" alt="" /></a></li>
232
+
233
+ <li><a href="#"><img src="#" alt="" /></a></li>
234
234
 
235
235
 
236
236
 

3

画像URL修正

2019/02/08 08:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -282,19 +282,19 @@
282
282
 
283
283
  <tr><td>
284
284
 
285
- <a href="http://www.cambio-w.com/fs/lady/c/"><img src="https://secure2.future-shop.jp/~lady/smartphone/header_button_false.jpg" width="100%"></a>
285
+ <a href="#"><img src="#" width="100%"></a>
286
286
 
287
287
  </td>
288
288
 
289
289
  <td>
290
290
 
291
- <a href="http://www.cambio-w.com/fs/lady/ShoppingCart.html"><img src="https://secure2.future-shop.jp/~lady/smartphone/l-header_right_sp2.png" width="100%"></a>
291
+ <a href="#"><img src="#" width="100%"></a>
292
292
 
293
293
  </td>
294
294
 
295
295
  <td>
296
296
 
297
- <a href="http://www.cambio-w.com/fs/lady/WishList.html"><img src="https://secure2.future-shop.jp/~lady/smartphone/l-header_right_sp.png" width="100%"></a>
297
+ <a href="#"><img src="#" width="100%"></a>
298
298
 
299
299
  </td>
300
300
 

2

コードの整理

2019/02/08 08:50

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,9 @@
1
+ 2/8追記
2
+
3
+ コメント頂いたため、実際のページの流れに沿って構成コードを書き直し致しました。
4
+
5
+
6
+
1
7
  1/7
2
8
 
3
9
  質問させて頂いた内容の実現方法について考えたのですが、
@@ -16,278 +22,344 @@
16
22
 
17
23
 
18
24
 
19
-
20
-
21
-
22
-
23
- お世話になっております。昨日こちらで助力頂き、drawerの設置ができました。
24
-
25
- サイト上の不具合などを確認しおおむね完成に近づいたのですが、
26
-
27
- drawerと同じページで使用しているnivosliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
25
+ お世話になっております。drawerと同じページで使用しているnivosliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
28
-
29
-
30
-
31
- nivosliderで使用するJSなど
26
+
27
+
32
28
 
33
29
  ```
34
30
 
35
- <link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
36
-
37
- <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
38
-
39
- <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
40
-
41
-
42
-
43
-
44
-
45
- 実際に表示させるところの記述
46
-
47
-
48
-
49
- <div id="slider" class="nivoSlider">
50
-
51
- <img src="images/topimage1.jpg" alt="topimage1" />
52
-
53
- <img src="images/topimage2.jpg" alt="topimage2" />
54
-
55
- <img src="images/topimage3.jpg" alt="topimage3" />
56
-
57
- <img src="images/topimage4.jpg" alt="topimage4" />
31
+
32
+
33
+ <!-- ヘッダ始まり -->
34
+
35
+ <a name="pagetop"></a>
36
+
37
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes">
38
+
39
+
40
+
41
+ <!-- jQuery読み込み -->
42
+
43
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
44
+
45
+
46
+
47
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
48
+
49
+
50
+
51
+
52
+
53
+ <!-- jS読み込み -->
54
+
55
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
56
+
57
+ <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/sp.js"></script>
58
+
59
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
60
+
61
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
62
+
63
+
64
+
65
+
66
+
67
+ <!-- CSS読み込み -->
68
+
69
+
70
+
71
+ <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.min.css">
72
+
73
+
74
+
75
+ <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.style.css">
76
+
77
+
78
+
79
+
80
+
81
+ <div class="drawer drawer--left">
82
+
83
+
84
+
85
+ <nav class="drawer-nav">
86
+
87
+ <ul class="drawer-menu">
88
+
89
+
90
+
91
+ <li class="drawer-design7"><a href="#">WOMEN</a></li>
92
+
93
+ <li class="drawer-design6"><a href="#">MEN</a></li>
94
+
95
+ <li class="drawer-design1"><a href="#">&#062;メルマガ登録</a></li>
96
+
97
+
98
+
99
+ <li class="drawer-design3">人気カテゴリ</li>
100
+
101
+
102
+
103
+ <li class="drawer-design1"><a href="#">&#062;ランキング</a></li>
104
+
105
+ <li class="drawer-design1"><a href="#">&#062;新作アイテム</a></li>
106
+
107
+ <ul class="drawer-menu">
108
+
109
+ <li class="drawer-dropdown">
110
+
111
+ <a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">&#062;カテゴリー<span class="drawer-caret"></span></a>
112
+
113
+ <ul class="drawer-dropdown-menu">
114
+
115
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">カテゴリ1</font></a></li>
116
+
117
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">カテゴリ2</font></a></li>
118
+
119
+ </ul>
120
+
121
+ </li>
122
+
123
+ <ul class="drawer-menu">
124
+
125
+ <li class="drawer-dropdown">
126
+
127
+ <a class="drawer-menu-item drawer-design11" data-toggle="dropdown" role="button" aria-expanded="false">&#062;ブランド<span class="drawer-caret"></span></a>
128
+
129
+ <ul class="drawer-dropdown-menu">
130
+
131
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド1</font></a></li>
132
+
133
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド2</font></a></li>
134
+
135
+ </ul>
136
+
137
+ </li>
138
+
139
+ </ul>
140
+
141
+ </nav>
142
+
143
+
144
+
145
+
146
+
147
+ <script>
148
+
149
+ $(document).ready(function() {
150
+
151
+ $('.drawer').drawer();
152
+
153
+ });
154
+
155
+ </script>
156
+
157
+
158
+
159
+ <script type="text/javascript">
160
+
161
+ jQuery(function($) {
162
+
163
+ $(".swipebox").swipebox();
164
+
165
+ });
166
+
167
+ </script>
168
+
169
+
170
+
171
+ <script>
172
+
173
+ $(".drawer-dropdown-menu a").on("click", function (e) {
174
+
175
+ e.stopPropagation();
176
+
177
+ });
178
+
179
+ </script>
180
+
181
+
182
+
183
+ <button type="button" class="drawer-toggle drawer-hamburger">
184
+
185
+ <span class="sr-only">toggle navigation</span>
186
+
187
+ <span class="drawer-hamburger-icon"></span>
188
+
189
+ </button>
190
+
191
+
58
192
 
59
193
  </div>
60
194
 
61
195
 
62
196
 
197
+ <div class="body-bk"></div>
198
+
199
+
200
+
201
+ <!-- ボディ部分 -->
202
+
203
+ <!-- topスライダーnivo-slider用 -->
204
+
205
+ <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/jqueryslider.js"></script>
206
+
207
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/nivo-slider.css" media="all" />
208
+
209
+
210
+
211
+ <!-- topスライダー画像用 -->
212
+
213
+
214
+
215
+
216
+
217
+ <div class="flickSlider">
218
+
219
+
220
+
221
+ <div class="flickView">
222
+
223
+
224
+
225
+ <ul><!-- スマートフォン大画像 -->
226
+
227
+ <li><a href="http://www.cambio-w.com/fs/lady/c/sale"><img src="http://www.cambio-w.com/topgazou/smartphone1.jpg" alt="" /></a></li>
228
+
229
+ <li><a href="http://www.cambio-w.com/fs/lady/c/ungrid19ss"><img src="http://www.cambio-w.com/topgazou/smartphone4.jpg" alt="" /></a></li>
230
+
231
+ <li><a href="http://www.cambio-w.com/fs/lady/c/lily_brown19ss"><img src="http://www.cambio-w.com/topgazou/smartphone2.jpg" alt="" /></a></li>
232
+
233
+ <li><a href="http://www.cambio-w.com/fs/lady/c/osmosis18aw"><img src="http://www.cambio-w.com/topgazou/smartphone3.jpg" alt="" /></a></li>
234
+
235
+
236
+
237
+ </ul>
238
+
239
+ </div><!--/.flickView-->
240
+
241
+
242
+
243
+ <div class="flickThumb">
244
+
245
+ <ul>
246
+
63
- $(window).load(function() {
247
+ <li>●</li>
248
+
64
-
249
+ <li>●</li>
250
+
251
+ <li>●</li>
252
+
253
+ <li>●</li>
254
+
255
+ </ul>
256
+
257
+ </div><!--/.flickThumb-->
258
+
259
+ </div><!--/.flickSlider-->
260
+
261
+
262
+
263
+ <!-- ボディ終わり -->
264
+
265
+
266
+
267
+ <!--フッター-->
268
+
269
+
270
+
271
+ <!-- ヘッダー看板 -->
272
+
273
+
274
+
275
+ <div id="header-fixed">
276
+
277
+ <div id="header-bk">
278
+
279
+ <div class="headerbox">
280
+
281
+ <table>
282
+
283
+ <tr><td>
284
+
285
+ <a href="http://www.cambio-w.com/fs/lady/c/"><img src="https://secure2.future-shop.jp/~lady/smartphone/header_button_false.jpg" width="100%"></a>
286
+
287
+ </td>
288
+
289
+ <td>
290
+
291
+ <a href="http://www.cambio-w.com/fs/lady/ShoppingCart.html"><img src="https://secure2.future-shop.jp/~lady/smartphone/l-header_right_sp2.png" width="100%"></a>
292
+
293
+ </td>
294
+
295
+ <td>
296
+
297
+ <a href="http://www.cambio-w.com/fs/lady/WishList.html"><img src="https://secure2.future-shop.jp/~lady/smartphone/l-header_right_sp.png" width="100%"></a>
298
+
299
+ </td>
300
+
301
+ </table>
302
+
303
+ </div>
304
+
305
+ </div>
306
+
307
+ </div>
308
+
309
+
310
+
311
+ <!-- ヘッダー看板終わり -->
312
+
313
+
314
+
315
+
316
+
317
+ <!-- フッタコメント終わり -->
318
+
319
+
320
+
321
+
322
+
323
+ ```
324
+
325
+
326
+
327
+ 途中省略しておりますが、このような構成です。ちなみに自分では、
328
+
329
+
330
+
331
+ <script>
332
+
333
+ $(".drawer-dropdown-menu a").on("click", function (e) {
334
+
65
- $('#slider').nivoSlider();
335
+ $('#slider').data('nivoslider').stop();
336
+
337
+ };
338
+
339
+ </script>
340
+
341
+
342
+
343
+ だったり、
344
+
345
+
346
+
347
+ <script>
348
+
349
+
350
+
351
+ $(".drawer-dropdown-menu a").on("click", function (e) {
352
+
353
+ $('#slider').nivoslider({manualAdvance: false,});
66
354
 
67
355
  });
68
356
 
69
357
 
70
358
 
71
- ```
72
-
73
-
74
-
75
-
76
-
77
- drawerで使用するJSなど
78
-
79
- ```
80
-
81
- <!-- jQuery読み込み -->
82
-
83
-
84
-
85
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
86
-
87
-
88
-
89
-
90
-
91
- <!-- jS読み込み -->
92
-
93
-
94
-
95
- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
96
-
97
-
98
-
99
- <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
100
-
101
-
102
-
103
- <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
104
-
105
-
106
-
107
-
108
-
109
- <!-- CSS読み込み -->
110
-
111
-
112
-
113
- <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.min.css">
114
-
115
-
116
-
117
- <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.style.css">
118
-
119
-
120
-
121
- 実際動かすときのコード
122
-
123
-
124
-
125
- <div class="drawer drawer--left">
126
-
127
-
128
-
129
- <nav class="drawer-nav">
130
-
131
- <ul class="drawer-menu">
132
-
133
-
134
-
135
- <li class="drawer-design7"><a href="http://www.cambio-w.com/">WOMEN</a></li>
136
-
137
- <li class="drawer-design6"><a href="http://www.cambio.co.jp/">MEN</a></li>
138
-
139
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/MailMagazineEntry.html">&#062;メルマガ登録</a></li>
140
-
141
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/Login.html">&#062;ログイン</a></li>
142
-
143
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/Logout.html">&#062;ログアウト</a></li>
144
-
145
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/MyPageTop.html">&#062;マイページ</a></li>
146
-
147
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/CouponInformation.html">&#062;クーポン</a></li>
148
-
149
-
150
-
151
- <li class="drawer-design3">人気・新着・注目</li>
152
-
153
-
154
-
155
- <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/ranking">&#062;ランキング</a></li>
156
-
157
- <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/winter2018">&#062;新作アイテム</a></li>
158
-
159
- <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/?id=reservation">&#062;予約開催中ブランド</a></li>
160
-
161
- <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/sale">&#062;SALEアイテム</a></li>
162
-
163
-
164
-
165
- <ul class="drawer-menu">
166
-
167
- <li class="drawer-dropdown">
168
-
169
- <a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">&#062;カテゴリー<span class="drawer-caret"></span></a>
170
-
171
- <ul class="drawer-dropdown-menu">
172
-
173
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/onepiece"><font color="#333333">ワンピース</font></a></li>
174
-
175
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/tops"><font color="#333333">トップス</font></a></li>
176
-
177
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/shirt"><font color="#333333">シャツ・ブラウス</font></a></li>
178
-
179
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/knit"><font color="#333333">ニット</font></a></li>
180
-
181
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/cardigan"><font color="#333333">カーディガン・ベスト</font></a></li>
182
-
183
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/parka"><font color="#333333">パーカー・スウェット</font></a></li>
184
-
185
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/outer"><font color="#333333">アウター</font></a></li>
186
-
187
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/skirt"><font color="#333333">スカート</font></a></li>
188
-
189
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/pants"><font color="#333333">パンツ</font></a></li>
190
-
191
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/goods"><font color="#333333">グッズ</font></a></li>
192
-
193
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/accessory"><font color="#333333">アクセサリー</font></a></li>
194
-
195
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="http://www.cambio-w.com/fs/lady/c/sale"><font color="#333333">セールアイテム</font></a></li>
196
-
197
- </ul>
198
-
199
- </li>
200
-
201
-
202
-
203
- <li class="drawer-design4"><a href="https://c10.future-shop.jp/fs/lady/MemberEntryEdit.html">・会員登録</a></li>
204
-
205
- <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/c/guide">・ご利用ガイド</a></li>
206
-
207
- <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/c/guide?id=carriage">・送料について</a></li>
208
-
209
- <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/PrivacyPolicy.html">・プライバシーポリシー</a></li>
210
-
211
- <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/c/mail">・お問合せ</a></li>
212
-
213
- <li class="drawer-design5"><a href="http://www.cambio-w.com/fs/lady/BusinessDeal.html">・特定商取引法に基づく表記</a></li>
214
-
215
-
216
-
217
- <li class="drawer-design1">
218
-
219
- <table class="sns-design">
220
-
221
- <tr>
222
-
223
- <td>
224
-
225
- <a href="https://www.instagram.com/cambio_women/"><IMG alt=インスタグラム src="https://c10.future-shop.jp/shop/item/lady/design/img01/icon-ins.png" border="0" width="40"></a>
226
-
227
- </td>
228
-
229
-
230
-
231
- <td>
232
-
233
- <a href="https://twitter.com/CambioStyle_w"><IMG alt=ツイッター src="https://c10.future-shop.jp/shop/item/lady/design/img01/icon-tw.png" border="0" width="40"></a>
234
-
235
- </td>
236
-
237
-
238
-
239
- <td>
240
-
241
- <a href="https://www.facebook.com/cambio01"><IMG alt=フェイスブック src="https://c10.future-shop.jp/shop/item/lady/design/img01/icon-fb.png" border="0" width="40"></a>
242
-
243
- </td>
244
-
245
- </tr>
246
-
247
- </table>
248
-
249
- </li>
250
-
251
-
252
-
253
- </ul>
254
-
255
- </nav>
256
-
257
-
258
-
259
-
260
-
261
- <script>
262
-
263
- $(document).ready(function() {
264
-
265
- $('.drawer').drawer();
266
-
267
- });
268
-
269
- </script>
359
+ </script>
270
-
271
-
272
-
273
- <script>
360
+
274
-
275
- $(".drawer-dropdown-menu a").on("click", function (e) {
361
+
276
-
362
+
277
- e.stopPropagation();
363
+ を試してみましたがいまのところ動きません。
278
-
279
- });
364
+
280
-
281
- </script>
282
-
283
-
284
-
285
-
286
-
287
- ```
288
-
289
-
290
-
291
- 正直この挙動が直せるのかさえ分からない状況のため、どこを調べてよいかわかりません。
292
-
293
- お力添え頂けますと幸いです。
365
+ 何卒宜しくお願い致します。

1

質問への追記

2019/02/08 08:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,25 @@
1
+ 1/7
2
+
3
+ 質問させて頂いた内容の実現方法について考えたのですが、
4
+
5
+ 【あるJSの実行中は、他のある挙動を実行させないようにする】
6
+
7
+ というようなJSの処理？が書き込めれば
8
+
9
+
10
+
11
+ サイドメニューを開いたときは、スライドを停止させる
12
+
13
+
14
+
15
+ といった事ができるのではと思ったのですが、そのようなことは可能でしょうか…。
16
+
17
+
18
+
19
+
20
+
21
+
22
+
1
23
  お世話になっております。昨日こちらで助力頂き、drawerの設置ができました。
2
24
 
3
25
  サイト上の不具合などを確認しおおむね完成に近づいたのですが、