Jquery 切换下拉菜单答案

【问题标题】：Jquery Toggle Drop Down MenuJquery 切换下拉菜单
【发布时间】：2011-03-07 10:43:07
【问题描述】：

我正在尝试创建一个下拉菜单，当您将鼠标悬停在按钮上时，会在其下方显示一个 div，这是我的导航栏和 div 的 html 代码，当您将鼠标悬停在该按钮上时我希望显示

<ul class="buttonleft"> 
    <li id="lan"><a href="#language"><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#search">Search and Book <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Latest Offers <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Car Hire <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Contact Us <img src="images/arrow.png" alt="Arrow" /></a></li> 
</ul>         

<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="#lan=1"><img id="topflag" src="images/flags/es.png" alt="ES"/> Español</a>
    <a href="#lan=2"><img id="topflag" src="images/flags/de.png" alt="DE"/> Deutsch</a>
    <a href="#lan=3"><img id="topflag" src="images/flags/fr.png" alt="FR"/> Français</a>
    <a href="#lan=4"><img id="topflag" src="images/flags/it.png" alt="IT"/> Italiano</a>
    <a href="#lan=4">More</a>
</div>

这是我正在使用的 jQuery 代码：

$(document).ready(function(){
    $("#lan").hover(function(){
        $("#dropmenu2").fadeToggle("fast");
        $(this).toggleClass("active");
    });
});

我已经做到了，所以当您将鼠标悬停在带有 id lan 的按钮上时，下拉菜单 div 会出现，但是当鼠标离开按钮时，div 下拉菜单会消失，有没有办法让下拉菜单框停留，这样您就可以在下拉菜单上移动，然后当用户将鼠标移出下拉菜单时，它会消失

【问题讨论】：

标签： jquery html css drop-down-menu

【解决方案1】：

试试

$(document).ready(function(){
   $("#lan>a").bind({    
    mouseout : function(){
      $("#dropmenu2").fadeOut("fast");
      $(this).removeClass("active");
    },
    mouseenter: function() {
        $("#dropmenu2").fadeIn("fast");
        $(this).addClass("active");
    }
})

DEMO

Reference

【讨论】：

【解决方案2】：

不要使用悬停，而是使用 mouseover 作为您的功能，然后使用 mouseout 和另一个功能来处理您希望之后发生的事情。将鼠标移出功能附加到#ian。

【讨论】：

【解决方案3】：

检查这里..http://jsfiddle.net/chin/naF4J/1/

【讨论】：

【解决方案4】：

hover方法接受两个函数，一个是mouseenter，一个是mouseout。

$("#lan").hover(function() {
    //this is mouseenter
}, function() {
    //this is mouseout
});

【讨论】：