1
我已经构建了一个使用CSS和jQuery的自定义移动菜单，但是我在展开/折叠时遇到了一些奇怪的行为。 SlideToggle（）无意中连续打开和关闭几次。有时很难让它动起来，但是如果您尝试打开和关闭“服务”选项卡多次，您将遇到该错误。奇怪的行为使用jQuery移动下拉
有没有人有任何建议来纠正这个问题或更好的方法来剥皮猫？
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>