jQueryを使用したモバイルでの奇妙なベビーバイヤー

Question

私はCSSとjQueryを使用してカスタムモバイルメニューを作成しましたが、展開/折りたたみ時に奇妙な動作が発生しています。 SlideToggle（）は意図せずに何回か連続して開閉します。それを作動させるのが難しいことも時々ありますが、 "サービス"タブを数回開いて閉じると、そのバグが発生します。

誰にもこの問題を修正するためのアドバイスがありますか、または猫をスキンするためのより良い方法はありますか？

JFiddle

jQuery(document).ready(function($) { 
 
\t \t \t \t \t $("nav li:has(ul.sub-menu) a").addClass('expandable'); 
 
\t \t \t \t \t $("nav li:has(ul.sub-menu)").hover(function() { 
 
\t \t \t  \t $(this).children("a").click(function() { 
 
\t \t \t  \t $(this).toggleClass('open'); 
 
\t \t \t \t \t \t $(this).parent("li").children('ul').slideToggle(); 
 
\t \t \t  return false; 
 
\t \t \t  }); 
 
\t \t \t });   
 

 
});

body { font-size:20px; font-family:'Arial',sans-serif; } 
 
nav { background-color:#0073ae; padding:20px; } 
 
nav ul { margin:0; padding:0; list-style:none; } 
 
nav ul li { } 
 
nav ul li a { color:white; text-decoration:none; } 
 
nav > ul > li > ul > li { padding-bottom:10px; margin-bottom:10px; } 
 
nav \t > ul > li > ul > li > a { display:block; margin-bottom:5px; font-weight:900; } 
 
nav > ul > li > ul > li > ul { font-size:.8em; list-style:square; margin-left:15px; } \t 
 
nav > ul > li > ul > li > ul > li { color:#f7a11a; } 
 
nav.mobile { font-size:130%; text-transform:uppercase; } 
 
nav.mobile > ul > li { font-weight:700; border-bottom:1px dotted white; } 
 
nav.mobile > ul > li > a { display:block; padding:7px 0; } 
 
nav.mobile > ul > li > a:hover { text-decoration:none; color:white; } 
 
nav.mobile > ul > li > a.expandable:before { content:"+"; margin-right:10px; } 
 
nav.mobile > ul > li > a:before, nav.mobile > ul > li > a.open:before { content:"-"; margin-right:10px; } 
 
nav.mobile > ul > li > ul { font-size:80%; margin-left:20px; margin-top:10px; display:none; } 
 
nav.mobile > ul > li > ul > li { padding-bottom:0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<nav class="menu-main-menu-container mobile"> 
 
<ul class="menu clearfix" id="menu-main-menu"> 
 
\t <li><a href="#">About</a></li> 
 
\t <li><a href="#">Services</a> 
 
\t \t <ul class="sub-menu"> 
 
\t \t \t <li><a href="#">Sub Menu Title 1</a> 
 
\t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t \t <li><a href="#">Submenu Item 1</a></li> 
 
\t \t \t \t \t <li><a href="#">Submenu Item 2</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t \t <li><a href="#">Submenu Title 2</a> 
 
\t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t \t <li><a href="#">Submenu Item 1</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </li> 
 
\t <li><a href="#">Contact</a></li> 
 
</ul> 
 
</nav>

Answer 1

あなたのslideToggleにストップを（）を追加する必要があります。 slideToggleはアニメーションなので、自然に停止するか、強制停止するまで続きます。 「サービス」を5回すばやくクリックすると、slideToggleに何があっても5回アニメーション化され、望ましくない結果が得られます。同じ要素で別のアニメーションを開始する前に、進行中のアニメーションを常に停止したいとします。

変更：

$(this).parent("li").children('ul').stop().slideToggle(); 

へ

$(this).parent("li").children('ul').slideToggle();