jQuery向下滑动div - 当它结束时消失

我正在做一个向下滑动选项的向下滑动菜单。jQuery向下滑动div - 当它结束时消失

我使用下面的jQuery

$(document).ready(function() { 
    $(".menu_item").hover(function() { 
     $(".menu_options").slideDown(400); 
    }, function() { 
     $(".menu_options").slideUp(400); 
    }); 
});

我的问题是，当它滑下，我去到已经滑下消失股利 - 这里是设立

截图

Screenshot

这一领域的HTML是

<div class="menu"> 
      <div class="menu_item" id="1"> 
       Landlord Packages 
      </div> 
      <div class="spacer"></div> 
      <div class="menu_item"> 
       Single Items 
      </div> 
      <div class="menu_options" id="1"></div> 
     </div>

预先感谢您的帮助:-)

的jsfiddle脚本http://jsfiddle.net/pCTXq/

来源

2013-04-23 AppleTattooGuy

你也可以包括你的CSS吗？或者更好的是，提供一个jsFiddle的例子？ – cfs 2013-04-23 14:09:14

@cfs :-)感谢做了该 – AppleTattooGuy 2013-04-23 14:13:52

同类话题的其他还有： http://stackoverflow.com/questions/7085758/jquery-mousover-on-a-div-open-submenu-which-应该保持打开时鼠标/ 7085858＃7085858 祝你好运！ – dropuse 2013-04-23 14:15:28

尝试

$(document).ready(function() { 
    $(".menu_item, .menu_options").hover(function() { 
     $(".menu_options").stop(true, true).slideDown(400); 
    }, function() { 
     $(".menu_options").stop(true, true).delay(10).slideUp(400); 
    }); 
});

这应该做你所需要的。

我的小提琴：http://jsfiddle.net/MCvsd/54/

编辑：您提供的小提琴，更新：http://jsfiddle.net/pCTXq/1/

来源

2013-04-23 14:11:32 tymeJV

非常感谢您的帮助 - 虽然我在.menu_item上的悬停渐变消失了，但显然我并没有在这方面徘徊 - 这可以在jQuery中修复 - 非常感谢您的帮助。 – AppleTattooGuy 2013-04-23 14:16:46

你应该能够用'.addClass'和'.removeClass'完成这个问题解决它 - http://stackoverflow.com/questions/4358964/jquery-hover-addclass-problem – tymeJV 2013-04-23 14:18:59

谢谢你:-)工作正常，但我不确定在哪里删除类 - 我已经更新JSfiddle http://jsfiddle.net/pCTXq/2/ – AppleTattooGuy 2013-04-23 14:31:12

这里的问题是，你看对.menu_item悬停滑动.menu_options下来，但由于.menu_options是.menu_item之外，移动鼠标到.menu_options将会隐藏它。

您可以通过在每个.menu_item div中嵌套您的.menu_options来解决此问题。用JSfiddle或codepen（用你的css）解决这个问题是很好的。

<div class="menu"> 

    <div class="menu_item" id="1"> 
     Landlord Packages 
    </div> 

    <div class="spacer"></div> 

    <div class="menu_item"> 
     Single Items 
    <div class="menu_options" id="1"></div> 
    </div> 
</div>

来源

2013-04-23 14:11:12

嵌套的方式，但如果你仍然DONOT想使用嵌套的，可以按如下

$(document).ready(function() { 
    $(".menu_item").hover(function() { 
     $(".menu_options").slideDown(400); 
    }); 
    $(".menu_options").mouseleave(function() { 
     $(".menu_options").slideUp(400); 
    }); 
});

做些什么

来源

2013-04-23 14:16:13 panther

jQuery向下滑动div - 当它结束时消失

回答

相关问题