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

質問編集履歴

9

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

2019/02/15 09:49

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
File without changes

8

追記説明

2019/02/15 09:49

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,16 @@
1
1
  2/15編集
2
- 回答頂いた点、リストの入れ子を見直し修正したコードに貼り換えました。
2
+ 下記で回答頂いた点、リストの入れ子を見直し修正したコードに貼り換えました。
3
3
 
4
+ (CSSとJSが増えていますが、ひとつづつ外してみて今回の問題には関係ないものと思ったので記述していなかったものです。念のため全て記入してみました。)
5
+
4
6
  お世話になっております。drawerと同じページで使用しているflickSliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
5
7
 
8
+ 回答にて、
9
+ <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>
10
+ この部分が、時間経過でスライドするときに変化してしまっていて、<li>と<ul>の入れ子がおかしいせいだというアドバイス頂き修正してみましたが、まだ干渉してドロップダウンが勝手に閉じてしまいます。
11
+ リストは修正できたと思うのですが…。
12
+
13
+
6
14
  【flickSlider参考ページ】
7
15
  http://black-flag.net/jquery/20130514-4588.html
8
16
 
@@ -162,7 +170,4 @@
162
170
  ```
163
171
 
164
172
  途中省略しておりますが、このような構成です。
165
-
166
-
167
-
168
- 何卒宜しくお願い致します。
173
+ 助言頂けますとありがたいです。何卒宜しくお願い致します。

7

コードの書き換え

2019/02/15 09:27

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- nivosliderの画像自動送り時にdrawerのサイドメニューが閉じてしまう。
1
+ flickSliderの画像自動送り時にdrawerのサイドメニューが閉じてしまう。
body CHANGED
@@ -1,16 +1,6 @@
1
- 2/13追記
1
+ 2/15編集
2
- コメント頂いた点、jqueryが複数回読まている点について確認・修正いたしました。
2
+ 回答頂いた点、リストの入子を見直し修正したコードに貼り換えました。
3
- スライダーとして使用しているものがnivosliderではなくflickSliderでしたので、その点を修正しました。
4
3
 
5
- 1/7
6
- 質問させて頂いた内容の実現方法について考えたのですが、
7
- 【あるJSの実行中は、他のある挙動を実行させないようにする】
8
- というようなJSの処理?が書き込めれば
9
-
10
- サイドメニューを開いたときは、スライドを停止させる
11
-
12
- といった事ができるのではと思ったのですが、そのようなことは可能でしょうか…。
13
-
14
4
  お世話になっております。drawerと同じページで使用しているflickSliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
15
5
 
16
6
  【flickSlider参考ページ】
@@ -25,23 +15,45 @@
25
15
  <!-- jQuery読み込み -->
26
16
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
27
17
 
18
+
28
19
  <!-- jS読み込み -->
29
20
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
21
+
22
+ <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.js"></script>
23
+
30
24
  <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/sp.js"></script>
25
+
31
26
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
27
+
32
28
  <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
33
29
 
34
30
 
31
+
35
32
  <!-- CSS読み込み -->
36
33
 
34
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/css/gmenu.css" media="all" />
35
+
36
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.css" media="all" />
37
+
38
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/base.css" media="all" />
39
+
40
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/common.css" media="all" />
41
+
37
42
  <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.min.css">
38
43
 
39
44
  <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.style.css">
40
45
 
41
46
 
42
47
  <div class="drawer drawer--left">
48
+ <header role="banner">
49
+ <!-- ハンバーガーボタン -->
43
50
 
51
+ <button type="button" class="drawer-toggle drawer-hamburger">
52
+ <span class="sr-only">toggle navigation</span>
53
+ <span class="drawer-hamburger-icon"></span>
54
+ </button>
55
+ <!-- ナビゲーションの中身 -->
44
- <nav class="drawer-nav">
56
+ <nav class="drawer-nav" role="navigation">
45
57
  <ul class="drawer-menu">
46
58
 
47
59
  <li class="drawer-design7"><a href="#">WOMEN</a></li>
@@ -52,51 +64,40 @@
52
64
 
53
65
  <li class="drawer-design1"><a href="#">&#062;ランキング</a></li>
54
66
  <li class="drawer-design1"><a href="#">&#062;新作アイテム</a></li>
67
+
68
+
55
- <ul class="drawer-menu">
69
+ <!-- ドロップダウンの中身 -->
56
- <li class="drawer-dropdown">
57
- <a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">&#062;カテゴリー<span class="drawer-caret"></span></a>
70
+ <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>
58
71
  <ul class="drawer-dropdown-menu">
59
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">カテゴリ1</font></a></li>
72
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ワンピース</font></a></li>
60
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">カテゴリ2</font></a></li>
73
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">トップス</font></a></li>
61
74
  </ul>
62
75
  </li>
63
- <ul class="drawer-menu">
76
+
64
- <li class="drawer-dropdown">
65
- <a class="drawer-menu-item drawer-design11" data-toggle="dropdown" role="button" aria-expanded="false">&#062;ブランド<span class="drawer-caret"></span></a>
77
+ <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>
66
78
  <ul class="drawer-dropdown-menu">
67
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド1</font></a></li>
79
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド1</font></a></li>
68
- <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド2</font></a></li>
80
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド2</font></a></li>
69
81
  </ul>
70
82
  </li>
83
+
71
84
  </ul>
72
85
  </nav>
86
+ </header>
87
+ </div>
73
88
 
74
-
75
89
  <script>
76
90
  $(document).ready(function() {
77
91
  $('.drawer').drawer();
78
92
  });
79
93
  </script>
80
94
 
81
- <script type="text/javascript">
82
- jQuery(function($) {
83
- $(".swipebox").swipebox();
84
- });
85
- </script>
86
-
87
95
  <script>
88
96
  $(".drawer-dropdown-menu a").on("click", function (e) {
89
97
  e.stopPropagation();
90
98
  });
91
99
  </script>
92
100
 
93
- <button type="button" class="drawer-toggle drawer-hamburger">
94
- <span class="sr-only">toggle navigation</span>
95
- <span class="drawer-hamburger-icon"></span>
96
- </button>
97
-
98
- </div>
99
-
100
101
  <div class="body-bk"></div>
101
102
 
102
103
  <!-- ボディ部分 -->
@@ -155,30 +156,13 @@
155
156
  </div>
156
157
 
157
158
  <!-- ヘッダー看板終わり -->
158
-
159
-
160
159
  <!-- フッタコメント終わり -->
161
160
 
162
161
 
163
162
  ```
164
163
 
165
- 途中省略しておりますが、このような構成です。ちなみに自分では、
164
+ 途中省略しておりますが、このような構成です。
166
165
 
167
- <script>
168
- $(".drawer-dropdown-menu a").on("click", function (e) {
169
- $('#slider').data('nivoslider').stop();
170
- };
171
- </script>
172
166
 
173
- だったり、
174
167
 
175
- <script>
176
-
177
- $(".drawer-dropdown-menu a").on("click", function (e) {
178
- $('#slider').nivoslider({manualAdvance: false,});
179
- });
180
-
181
- </script>
182
-
183
- を試してみましたがいまのところ動きません。
184
168
  何卒宜しくお願い致します。

6

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

2019/02/15 09:19

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  2/13追記
2
2
  コメント頂いた点、jqueryが複数回読まれている点について確認・修正いたしました。
3
+ スライダーとして使用しているものがnivosliderではなくflickSliderでしたので、その点を修正しました。
3
4
 
4
5
  1/7
5
6
  質問させて頂いた内容の実現方法について考えたのですが、
@@ -10,8 +11,11 @@
10
11
 
11
12
  といった事ができるのではと思ったのですが、そのようなことは可能でしょうか…。
12
13
 
13
- お世話になっております。drawerと同じページで使用しているnivosliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
14
+ お世話になっております。drawerと同じページで使用しているflickSliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
14
15
 
16
+ 【flickSlider参考ページ】
17
+ http://black-flag.net/jquery/20130514-4588.html
18
+
15
19
  ```
16
20
 
17
21
  <!-- ヘッダ始まり -->

5

コードの修正

2019/02/13 06:05

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
- 2/8追記
1
+ 2/13追記
2
- コメント頂いたため実際のページの流れに沿っ構成コードを書き直致しました。
2
+ コメント頂いたjqueryが複数回読まている点つい確認・修正いたしました。
3
3
 
4
4
  1/7
5
5
  質問させて頂いた内容の実現方法について考えたのですが、
@@ -21,9 +21,6 @@
21
21
  <!-- jQuery読み込み -->
22
22
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
23
23
 
24
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
25
-
26
-
27
24
  <!-- jS読み込み -->
28
25
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
29
26
  <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/sp.js"></script>

4

画像URL修正

2019/02/13 01:08

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -111,10 +111,10 @@
111
111
  <div class="flickView">
112
112
 
113
113
  <ul><!-- スマートフォン大画像 -->
114
- <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>
114
+ <li><a href="#"><img src="#" alt="" /></a></li>
115
- <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>
115
+ <li><a href="#"><img src="#" alt="" /></a></li>
116
- <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>
117
- <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>
116
+ <li><a href="#"><img src="#" alt="" /></a></li>
117
+ <li><a href="#"><img src="#" alt="" /></a></li>
118
118
 
119
119
  </ul>
120
120
  </div><!--/.flickView-->

3

画像URL修正

2019/02/08 08:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -140,13 +140,13 @@
140
140
  <div class="headerbox">
141
141
  <table>
142
142
  <tr><td>
143
- <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>
143
+ <a href="#"><img src="#" width="100%"></a>
144
144
  </td>
145
145
  <td>
146
- <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>
146
+ <a href="#"><img src="#" width="100%"></a>
147
147
  </td>
148
148
  <td>
149
- <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>
149
+ <a href="#"><img src="#" width="100%"></a>
150
150
  </td>
151
151
  </table>
152
152
  </div>

2

コードの整理

2019/02/08 08:50

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,3 +1,6 @@
1
+ 2/8追記
2
+ コメント頂いたため、実際のページの流れに沿って構成コードを書き直し致しました。
3
+
1
4
  1/7
2
5
  質問させて頂いた内容の実現方法について考えたのですが、
3
6
  【あるJSの実行中は、他のある挙動を実行させないようにする】
@@ -7,48 +10,24 @@
7
10
 
8
11
  といった事ができるのではと思ったのですが、そのようなことは可能でしょうか…。
9
12
 
13
+ お世話になっております。drawerと同じページで使用しているnivosliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
10
14
 
11
-
12
- お世話になっております。昨日こちらで助力頂き、drawerの設置ができました。
13
- サイト上の不具合などを確認しおおむね完成に近づいたのですが、
14
- drawerと同じページで使用しているnivosliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;
15
-
16
- nivosliderで使用するJSなど
17
15
  ```
18
- <link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
19
- <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
20
- <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
21
16
 
17
+ <!-- ヘッダ始まり -->
18
+ <a name="pagetop"></a>
19
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes">
22
20
 
23
- 実際に表示させるところの記述
24
-
25
- <div id="slider" class="nivoSlider">
26
- <img src="images/topimage1.jpg" alt="topimage1" />
27
- <img src="images/topimage2.jpg" alt="topimage2" />
28
- <img src="images/topimage3.jpg" alt="topimage3" />
29
- <img src="images/topimage4.jpg" alt="topimage4" />
30
- </div>
31
-
32
- $(window).load(function() {
33
- $('#slider').nivoSlider();
34
- });
35
-
36
- ```
37
-
38
-
39
- drawerで使用するJSなど
40
- ```
41
21
  <!-- jQuery読み込み -->
42
-
43
22
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
44
23
 
24
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
45
25
 
26
+
46
27
  <!-- jS読み込み -->
47
-
48
28
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
49
-
29
+ <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/sp.js"></script>
50
30
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
51
-
52
31
  <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
53
32
 
54
33
 
@@ -58,73 +37,37 @@
58
37
 
59
38
  <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.style.css">
60
39
 
61
- 実際動かすときのコード
62
40
 
63
41
  <div class="drawer drawer--left">
64
42
 
65
43
  <nav class="drawer-nav">
66
44
  <ul class="drawer-menu">
67
45
 
68
- <li class="drawer-design7"><a href="http://www.cambio-w.com/">WOMEN</a></li>
46
+ <li class="drawer-design7"><a href="#">WOMEN</a></li>
69
- <li class="drawer-design6"><a href="http://www.cambio.co.jp/">MEN</a></li>
47
+ <li class="drawer-design6"><a href="#">MEN</a></li>
70
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/MailMagazineEntry.html">&#062;メルマガ登録</a></li>
71
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/Login.html">&#062;ログイン</a></li>
48
+ <li class="drawer-design1"><a href="#">&#062;メルマガ登録</a></li>
72
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/Logout.html">&#062;ログアウト</a></li>
73
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/MyPageTop.html">&#062;マイページ</a></li>
74
- <li class="drawer-design1"><a href="https://c10.future-shop.jp/fs/lady/CouponInformation.html">&#062;クーポン</a></li>
75
49
 
76
- <li class="drawer-design3">人気・新着・注目</li>
50
+ <li class="drawer-design3">人気カテゴリ</li>
77
51
 
78
- <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/ranking">&#062;ランキング</a></li>
52
+ <li class="drawer-design1"><a href="#">&#062;ランキング</a></li>
79
- <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/winter2018">&#062;新作アイテム</a></li>
80
- <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/?id=reservation">&#062;予約開催中ブランド</a></li>
81
- <li class="drawer-design1"><a href="http://www.cambio-w.com/fs/lady/c/sale">&#062;SALEアイテム</a></li>
53
+ <li class="drawer-design1"><a href="#">&#062;新作アイテム</a></li>
82
-
83
54
  <ul class="drawer-menu">
84
55
  <li class="drawer-dropdown">
85
56
  <a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">&#062;カテゴリー<span class="drawer-caret"></span></a>
86
57
  <ul class="drawer-dropdown-menu">
87
- <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>
88
- <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>
58
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">カテゴリ1</font></a></li>
89
- <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>
90
- <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>
59
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">カテゴリ2</font></a></li>
91
- <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>
92
- <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>
93
- <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>
94
- <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>
95
- <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>
96
- <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>
97
- <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>
98
- <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>
99
60
  </ul>
100
61
  </li>
101
-
102
- <li class="drawer-design4"><a href="https://c10.future-shop.jp/fs/lady/MemberEntryEdit.html">・会員登録</a></li>
103
- <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/c/guide">・ご利用ガイド</a></li>
104
- <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/c/guide?id=carriage">・送料について</a></li>
105
- <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/PrivacyPolicy.html">・プライバシーポリシー</a></li>
106
- <li class="drawer-design4"><a href="http://www.cambio-w.com/fs/lady/c/mail">・お問合せ</a></li>
62
+ <ul class="drawer-menu">
107
- <li class="drawer-design5"><a href="http://www.cambio-w.com/fs/lady/BusinessDeal.html">・特定商取引法に基づく表記</a></li>
108
-
109
- <li class="drawer-design1">
63
+ <li class="drawer-dropdown">
64
+ <a class="drawer-menu-item drawer-design11" data-toggle="dropdown" role="button" aria-expanded="false">&#062;ブランド<span class="drawer-caret"></span></a>
110
- <table class="sns-design">
65
+ <ul class="drawer-dropdown-menu">
111
- <tr>
112
- <td>
113
- <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>
114
- </td>
115
-
116
- <td>
117
- <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>
66
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド1</font></a></li>
118
- </td>
119
-
120
- <td>
121
- <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>
67
+ <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ブランド2</font></a></li>
122
- </td>
123
- </tr>
124
- </table>
125
- </li>
126
-
127
68
  </ul>
69
+ </li>
70
+ </ul>
128
71
  </nav>
129
72
 
130
73
 
@@ -134,14 +77,107 @@
134
77
  });
135
78
  </script>
136
79
 
80
+ <script type="text/javascript">
81
+ jQuery(function($) {
82
+ $(".swipebox").swipebox();
83
+ });
84
+ </script>
85
+
137
86
  <script>
138
87
  $(".drawer-dropdown-menu a").on("click", function (e) {
139
88
  e.stopPropagation();
140
89
  });
141
90
  </script>
142
91
 
92
+ <button type="button" class="drawer-toggle drawer-hamburger">
93
+ <span class="sr-only">toggle navigation</span>
94
+ <span class="drawer-hamburger-icon"></span>
95
+ </button>
143
96
 
97
+ </div>
98
+
99
+ <div class="body-bk"></div>
100
+
101
+ <!-- ボディ部分 -->
102
+ <!-- topスライダーnivo-slider用 -->
103
+ <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/jqueryslider.js"></script>
104
+ <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/nivo-slider.css" media="all" />
105
+
106
+ <!-- topスライダー画像用 -->
107
+
108
+
109
+ <div class="flickSlider">
110
+
111
+ <div class="flickView">
112
+
113
+ <ul><!-- スマートフォン大画像 -->
114
+ <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>
115
+ <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>
116
+ <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>
117
+ <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>
118
+
119
+ </ul>
120
+ </div><!--/.flickView-->
121
+
122
+ <div class="flickThumb">
123
+ <ul>
124
+ <li>●</li>
125
+ <li>●</li>
126
+ <li>●</li>
127
+ <li>●</li>
128
+ </ul>
129
+ </div><!--/.flickThumb-->
130
+ </div><!--/.flickSlider-->
131
+
132
+ <!-- ボディ終わり -->
133
+
134
+ <!--フッター-->
135
+
136
+ <!-- ヘッダー看板 -->
137
+
138
+ <div id="header-fixed">
139
+ <div id="header-bk">
140
+ <div class="headerbox">
141
+ <table>
142
+ <tr><td>
143
+ <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>
144
+ </td>
145
+ <td>
146
+ <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>
147
+ </td>
148
+ <td>
149
+ <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>
150
+ </td>
151
+ </table>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- ヘッダー看板終わり -->
157
+
158
+
159
+ <!-- フッタコメント終わり -->
160
+
161
+
144
162
  ```
145
163
 
164
+ 途中省略しておりますが、このような構成です。ちなみに自分では、
165
+
166
+ <script>
167
+ $(".drawer-dropdown-menu a").on("click", function (e) {
168
+ $('#slider').data('nivoslider').stop();
169
+ };
170
+ </script>
171
+
172
+ だったり、
173
+
174
+ <script>
175
+
176
+ $(".drawer-dropdown-menu a").on("click", function (e) {
177
+ $('#slider').nivoslider({manualAdvance: false,});
178
+ });
179
+
180
+ </script>
181
+
146
- 正直この挙動直せるのかさえ分からな状況ため、どを調べてよいかわかりません。
182
+ を試してみましたがいろ動きません。
147
- 力添え頂けますと幸いです
183
+ 何卒宜しく願い致します。

1

質問への追記

2019/02/08 08:49

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,3 +1,14 @@
1
+ 1/7
2
+ 質問させて頂いた内容の実現方法について考えたのですが、
3
+ 【あるJSの実行中は、他のある挙動を実行させないようにする】
4
+ というようなJSの処理?が書き込めれば
5
+
6
+ サイドメニューを開いたときは、スライドを停止させる
7
+
8
+ といった事ができるのではと思ったのですが、そのようなことは可能でしょうか…。
9
+
10
+
11
+
1
12
  お世話になっております。昨日こちらで助力頂き、drawerの設置ができました。
2
13
  サイト上の不具合などを確認しおおむね完成に近づいたのですが、
3
14
  drawerと同じページで使用しているnivosliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;