我正在使用" jquery-1.7.1.min.js" ,我想要的是当我进入某个菜单时,下拉菜单应该顺利滑下但不会连续发生。它非常不一致,有时候什么也没有显示,有时它会继续滑动和滑落。 请帮帮我。
我正在使用以下代码
Html:
<nav>
<ul class="menuList">
<li><a href="#">Main Menu</a>
<div class="submenu">
<div class="submenuInner">
<div class="menus clearfix">
<ul class="firstlist">
<li><a href="">Sub Menu Left 1</a></li>
<li><a href="">Sub Menu Left 2</a></li>
<li><a href="">Sub Menu Left 3</a></li>
<li><a href="">Sub Menu Left 4</a></li>
<li><a href="">Sub Menu Left 5</a></li>
</ul>
<ul>
<li><a href="">Sub Menu Right 1</a></li>
<li><a href="">Sub Menu Right 2</a></li>
<li><a href="">Sub Menu Right 3</a></li>
<li><a href="">Sub Menu Right 4</a></li>
<li><a href="">Sub Menu Right 5</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
脚本:
$(document).ready(function() {
$(".menuList li").mouseenter( function() {
$(this).find(".submenuInner").stop().css({"margin-top":"0"});
$(this).children(".submenu").slideDown("slow");
});
//console.log("menuin");
$(".menuList li").mouseleave( function() {
$(this).children(".submenu").slideUp("slow");
//$(this).find(".submenuInner").animate({marginTop:"-100%"},{queue :false,duration :50});
$(this).find(".submenuInner").animate({marginTop:"-100%"},500);
});
});
答案 0 :(得分:1)
尝试
$(document).ready(function() {
$(".menuList li").mouseenter( function() {
$(this).find(".submenuInner").stop(true, true).css({"margin-top":"0"});
$(this).children(".submenu").stop(true, true).slideDown("slow");
});
//console.log("menuin");
$(".menuList li").mouseleave( function() {
$(this).children(".submenu").stop(true, true).slideUp("slow");
//$(this).find(".submenuInner").animate({marginTop:"-100%"},{queue :false,duration :50});
$(this).find(".submenuInner").stop(true, true).animate({marginTop:"-100%"},500);
});
});
演示:Fiddle
答案 1 :(得分:0)
您可以使用此代码:Demo
$(document).ready(function () {
$(".menuList li").hover(
function () {
$(this).find(".submenuInner").stop(true, true).css({
"margin-top": "0"
});
$(this).children(".submenu").slideDown("slow");
},
function () {
$(this).children(".submenu").slideUp("slow");
$(this).find(".submenuInner").animate({
marginTop: "-100%"
}, 500);
}
);
});