【发布时间】：2014-05-13 10:32:50
【问题描述】：
我使用 slideToggle 创建了一个带有可折叠部分的导航菜单。
当您点击“过滤这些产品”时，会出现子菜单。当您最初单击子菜单时，它会显示一个灰色区域，并且在显示选项之前有 1 或 2 秒的延迟。但是，如果您随后单击以关闭幻灯片菜单，则它会立即向上滑动。再次单击子菜单链接，它会立即向下滑动。
只有在第一次点击子菜单时才会出现延迟。有什么想法吗？
这是我的代码：
<style>
.refinement-ttl {display:none;}
.lhnav_container {width:100%; overflow:hidden; clear:both; border:1px solid #EBEBEB;}
#refinement-menu {margin:0%; width:100%;}
a.menu-link {height:auto; width:100%; display:block; color:#fff; float:left; padding:12px 0; font-family:arial; font-size:1.8em; text-transform:uppercase; background:#000000;}
.side-menu .refinement-submenu {padding:0px; display:none;}
.side-menu ul {margin:0; padding:0; border:none; overflow:hidden; width:98%; list-style:none;}
.side-menu>ul>li {margin:0 1%;}
.side-menu>ul>li>a {width:98%; padding:10px 0 10px 2%; background:#580f3b; color:#ffffff; text-transform:uppercase; text-decoration:none;}
.side-menu>ul>li>a.active {background:red;}
.side-menu>ul>li>a span {color:#ffffff; font-family:'geometric_medium', arial;}
.side-menu>ul>li>ul {margin:2% 0 0 0;}
.side-menu>ul>li>ul>li {height:50px; float:left; width:33%;}
.side-menu ul.refinement-submenu li label input {margin:2px 0 0 0;}
.side-menu ul.refinement-submenu li label:hover {background:none; color:#000000;}
.side-menu ul.refinement-submenu li label span {text-transform:uppercase; font-size:1.2em; font-family:'PTSansBold', arial;}
.side-menu.active, .side-menu > ul ul.active {max-height:200em;}
.side-menu ul ul, .side-menu ul ul ul {display:inherit; position:relative; left:auto; top:auto; border:none;}
.side-menu, .side-menu > ul ul { overflow: hidden; max-height: 0; background-color: #f4f4f4; }
.side-menu li a { color: #000; display: block; position: relative; }
.refinement-menu-btns {display:none;}
.refinement-menu-btns input.cancel_refinement {background:#929292; color:#ffffff; margin:0 10px 0 0;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="lft_col_sml">
<div class="lhnav_container">
<a class="menu-link" href="">Filter These Products</a>
<div class="refinement-ttl">Refine by</div>
<nav id="refinement-menu" class="side-menu subcategory-menu">
<div class="refinement-menu-btns">
<input type="button" class="cancel_refinement" value="CLEAR"/>
<input type="button" class="apply_refinement" value="APPLY »"/>
</div>
<ul>
<li class="has-submenu">
<a href="#">
<span>Menu Area 1</span>
</a>
<ul class="refinement-submenu">
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 2</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 3</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 4</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 5</span>
</label>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">
<span>Menu Area 2</span>
</a>
<ul class="refinement-submenu">
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 2</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 3</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 4</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 5</span>
</label>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">
<span>Menu Area 3</span>
</a>
<ul class="refinement-submenu">
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 2</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 3</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 4</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 5</span>
</label>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">
<span>Menu Area 4</span>
</a>
<ul class="refinement-submenu">
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 2</span>
</label>
</li>
</ul>
</li>
</ul>
<div class="refinement-menu-btns bottom">
<input type="button" class="cancel_refinement" value="CLEAR"/>
<input type="button" class="apply_refinement" value="APPLY »"/>
</div>
</nav>
</div>
<script>
jQuery( document ).ready( function( $ ) {
var $menu = $('#refinement-menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-submenu > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active');
$this.next('ul').slideToggle().addClass('active');
});
});
</script>
</div>
这是我的 jsfiddle：http://jsfiddle.net/j8aRt
提前感谢您的帮助！
【问题讨论】：
-
也许你在找什么：jsfiddle.net/j8aRt/1在动画元素之前添加类活动
标签： jquery navigation slidetoggle