jQueryのanimateとslideToggleを組み合わせた比較的単純なスライドメニューを作成しました。
動作的には全く問題無いのですが、メニューが開くときに、何故かメニューがちらついてしまい悩んでいます。
スライドメニューのjQuery自体は、このように作成しました。
javaScript
1// btnをクリックする事により、drawrが左右に動きます。 2// これにより、メニューの表示、非表示を実現しています。 3$(function($) { 4 $(document).ready(function() { 5 $('.btn').click(function(){ 6 $('.drawr').animate({width:'toggle'}); 7 }); 8 }); 9}); 10 11// メニューは、大分類が並んでおり、 12// 分類をクリックすると、その分類のメニューが、 13// アコーディオン式で表示されるというものです。 14$(function(){ 15 $(".accordion p").click(function(){ 16 $(this).next("ul").slideToggle(); 17 $(this).children("span").toggleClass("open"); 18 }); 19});
HTMLはこうです。
html
1<!-- ハンバーガメニューボタン ここをクリックするとメニューがスライド表示される --> 2<i class="fa btn fa-bars fa-stack-2x fa-inverse"></i> 3<!-- メニューの本体 --> 4<div class="drawr"> 5<!-- メニューの中身。最初は分類だけが見えていて、分類を押すと、その分類のメニューが表示される。 --> 6<ul class="accordion"> 7 <li> 8 <p><span>分類1</span></p> 9 <!-- リストは最初は閉じている --> 10 <ul> 11 <li><a href="http://xxx.co.jp/aaa.html">メニュー1</a></li> 12 <li><a href="http://xxx.co.jp/bbb.html">メニュー2</a></li> 13 <li><a href="http://xxx.co.jp/ccc.html">メニュー3</a></li> 14 </ul> 15 </li> 16 <li> 17 <p><span>分類2</span></p> 18 <ul> 19 <li><a href="http://xxx.co.jp/ddd.html">メニュー4</a></li> 20 <li><a href="http://xxx.co.jp/eee.html">メニュー5</a></li> 21 <li><a href="http://xxx.co.jp/fff.html">メニュー6</a></li> 22 </ul> 23 </li> 24</ul> 25</div> 26
CSSはこのようにしました。
css
1// スライドするメニューボックス 2.drawr { 3 display: none; 4 position: absolute; 5 top: 0px; 6 right:0; 7 width:260px; 8} 9 10#menu li { 11 width:260px; 12} 13 14#menu li a { 15 display: block; 16} 17 18// アコーディオンの中身のメニューは最初は非表示 19.accordion ul { 20 display: none; 21}
このようにしました。
表示時、このメニューは非表示です。
html
1<i class="fa btn fa-bars fa-stack-2x fa-inverse"></i>
のハンバーガーメニューをクリックすると
html
1<div class="drawr">
がスライド表示されるのですが、何故かその際に、リストの中身が一瞬だけ表示されたような感じでちらついて見えるのです。
ほんの一瞬で、その後すぐにメニューが全て閉じた状態になります。
CSSでは、
css
1.accordion ul { 2 display: none; 3}
としており、jQueryで非表示にしている訳では無いのに、なんでだろうという感じです。
こんな現象に悩まされた方はいらっしゃらないでしょうか?
「ひょっとして!?」的な事でもいいですので、何かピンとくる事がある方、ご教授頂けますと幸いです。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。