Question

我使用CSS和jQuery构建了自定义移动菜单，但是我在扩展/崩溃时遇到了一些奇怪的行为。 SlideToggle（）无意中连续几次打开和关闭。它有时很难让它采取行动，但如果你试图打开和关闭＆＃34;服务＆＃34;选项卡会多次遇到错误。

有没有人有任何建议可以纠正这个问题或更好的方法来修饰猫？

＆＃13;

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

＆＃13;

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	> 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; }	
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; }

＆＃13;

<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">
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a>
		<ul class="sub-menu">
			<li><a href="#">Sub Menu Title 1</a>
				<ul class="sub-menu">
					<li><a href="#">Submenu Item 1</a></li>
					<li><a href="#">Submenu Item 2</a></li>
				</ul>
			</li>
			<li><a href="#">Submenu Title 2</a>
				<ul class="sub-menu">
					<li><a href="#">Submenu Item 1</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Contact</a></li>
</ul>
</nav>

＆＃13;

Answer 1

您需要在slideToggle中添加一个stop（）。由于slideToggle是一个动画，它将一直持续直到它自然停止，或者你强制它停止。点击＆＃34;服务＆＃34;快速5次将告诉slideToggle动画5次，无论如何，这会给你带来不良后果。您始终希望在同一元素上启动另一个动画之前停止正在进行的动画。

变化：

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

到

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

使用jQuery的移动下拉奇怪的行为

1 个答案: