flickSliderの画像自動送り時にdrawerのサイドメニューが閉じてしまう。

2/15編集
下記で回答頂いた点、リストの入れ子を見直し修正したコードに貼り換えました。

(CSSとJSが増えていますが、ひとつづつ外してみて今回の問題には関係ないものと思ったので記述していなかったものです。念のため全て記入してみました。)

お世話になっております。drawerと同じページで使用しているflickSliderというjsの画像スライダーが自動で画像送りされる瞬間、drawerの[ドロップダウン部分の]メニューを開いていると、画像送りと一緒に閉じてしまう現象に気が付きました;;

回答にて、

<li class="drawer-dropdown"><a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">>カテゴリー<span class="drawer-caret"></span></a> この部分が、時間経過でスライドするときに変化してしまっていて、<li>と<ul>の入れ子がおかしいせいだというアドバイス頂き修正してみましたが、まだ干渉してドロップダウンが勝手に閉じてしまいます。リストは修正できたと思うのですが…。

【flickSlider参考ページ】
http://black-flag.net/jquery/20130514-4588.html


<!-- ヘッダ始まり -->
<a name="pagetop"></a>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes">

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<!-- jS読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.js"></script>

<script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/sp.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>



<!-- CSS読み込み -->

<link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/css/gmenu.css" media="all" />

<link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.css" media="all" />

<link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/base.css" media="all" />

<link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/common.css" media="all" />

<link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.min.css">

<link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.style.css">


<div class="drawer drawer--left">
<header role="banner">
<!-- ハンバーガーボタン -->

<button type="button" class="drawer-toggle drawer-hamburger">
			<span class="sr-only">toggle navigation</span>
			<span class="drawer-hamburger-icon"></span>
</button>
<!-- ナビゲーションの中身 -->
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu">

<li class="drawer-design7"><a href="#">WOMEN</a></li>
<li class="drawer-design6"><a href="#">MEN</a></li>
<li class="drawer-design1"><a href="#">&#062;メルマガ登録</a></li>

<li class="drawer-design3">人気カテゴリ</li>

<li class="drawer-design1"><a href="#">&#062;ランキング</a></li>
<li class="drawer-design1"><a href="#">&#062;新作アイテム</a></li>


<!-- ドロップダウンの中身 -->
<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>
<ul class="drawer-dropdown-menu">
<li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ワンピース</font></a></li>
<li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">トップス</font></a></li>
</ul>
 </li>

<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>
<ul class="drawer-dropdown-menu">
<li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">小ブランド1</font></a></li>
<li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">小ブランド2</font></a></li>
</ul>
 </li>

</ul>
</nav>
</header>
</div>

<script>
$(document).ready(function() {
$('.drawer').drawer();
});
</script>

<script>
$(".drawer-dropdown-menu a").on("click", function (e) {
  e.stopPropagation();
});
</script>

<div class="body-bk"></div>

<!-- ボディ部分 -->
<!-- topスライダーnivo-slider用 -->
<script type="text/javascript" src="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/jqueryslider.js"></script> 
<link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/nivo-slider.css" media="all" />

<!-- topスライダー画像用 -->


<div class="flickSlider">

<div class="flickView">

<ul><!-- スマートフォン大画像 -->
<li><a href="#"><img src="#" alt="" /></a></li>
<li><a href="#"><img src="#" alt="" /></a></li>
<li><a href="#"><img src="#" alt="" /></a></li>
<li><a href="#"><img src="#" alt="" /></a></li>

</ul>
</div><!--/.flickView-->

<div class="flickThumb">
<ul>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div><!--/.flickThumb-->
</div><!--/.flickSlider-->

<!-- ボディ終わり -->

<!--フッター-->

<!-- ヘッダー看板 -->

<div id="header-fixed">
	<div id="header-bk">
<div class="headerbox">
<table>
<tr><td>
<a href="#"><img src="#" width="100%"></a>
</td>
<td>
<a href="#"><img src="#" width="100%"></a>
</td>
<td>
<a href="#"><img src="#" width="100%"></a>
</td>
</table>
</div>
</div>
</div>

<!-- ヘッダー看板終わり -->
<!-- フッタコメント終わり -->

途中省略しておりますが、このような構成です。
助言頂けますとありがたいです。何卒宜しくお願い致します。

x_x

2019/02/08 06:53

前者と後者のコードはどのようになっているのでしょうか？再現が難しくなるので分けずに書いてもらえるでしょうか？

退会済みユーザー

2019/02/08 08:58

コメントありがとうございます。サイドメニューとスライダーの流れをコードで掲載致しましたのでご確認いただけますと幸いです。

x_x

2019/02/13 01:17 編集

jQueryが複数回読まれていますがあっているでしょうか？ Bootstrap 3が jQuery 1.9.1以降を要求するため、1.9.1以降の jQuery をほかのスクリプトよりも前に1回だけ読み込むとどうなりますか？

退会済みユーザー

2019/02/13 01:14

ご指摘の件ありがとうございます。複数あったのは、jqueryの数字が違うと別のものかと思い、新しいメニューなどを実装するつどバージョンの違うjqueryが増えていたためです。 drawer実装の際は1.11.3を使用したため、これのみ残して1.9.1を削除してみましたが、本番ページの動作に影響はありませんでした。＞他のスクリプトより先にという点は、一番上に記入している事で実現しているつもりにはしていますが、私の認識不足などありましたらご指摘ください。ドロップダウンがスライダーの自動送りと共に閉じてしまう点は変わらないようです。

x_x

2019/02/13 01:27

https://secure2.future-shop.jp/~lady/smartphone/nivo-slider/jqueryslider.js というのがnivosliderかと思いましたがこれは違うようです。どこで読み込んでいるでしょうか？

退会済みユーザー

2019/02/13 06:08

ご指摘ありがとうございます。JSなどが収納されていたフォルダ名などから、nivosliderを使用しているものと思っておりましたが、flickSliderというJSを使用していたようです。申し訳ありません；【flickSlider参考ページ】http://black-flag.net/jquery/20130514-4588.html JS内にある、 // 自動再生（有り無し） if(autoPlay == 'on'){ この部分をOFFにできれば止められるでしょうか…。私も、使用JS自体間違えていましたので、できる範囲で再度考えてみようと思います。

行動規範の内容に同意します

回答3件

スライダー側では時間が来ると ●(.flickThumbのli) をクリック(trigger)することで切り替えていますが、これがdrawerのliのクリックと認識されて誤動作しています。
ul, li の入れ子を正しく記述することで改善されるので、タグを見直してみてください。
ul直下にulは来ません

投稿2019/02/13 06:56

x_x

総合スコア13749