使用jquery在hover / mouseout上显示/隐藏下拉菜单

时间:2009-06-12 21:15:56

标签: jquery

所以我有一个带有下拉菜单的简单导航栏,用于当用户在更多标签上悬停时。当用户将鼠标移出类别div时,我想隐藏下拉菜单。

问题是,当用户将鼠标移入ul li时,下拉菜单将关闭。我如何设置它,以便该函数忽略类别div中的ul li。尝试过类别> *但没有用。

<div id="navbar">
  <ul>
    <li>tab1</li>
    <li>tab2</li>
    <li id="moretab">more</li>
  </ul>
</div> 
<div id="categories">
  <ul>
    <li>cats</li>
    <li>dogs</li>
  </ul>
</div>

$("#moretab").hover(function(){
  $("#categories").css("visibility","visible"); 
});
$("#categories").mouseout(function() {
    $("#categories").css("visibility","hidden"); 
});

5 个答案:

答案 0 :(得分:16)

$(document).ready(function () {

  $("#moretab").mouseenter(function(){
    $("#categories").show(); 
  });

  $("#categories, #moretab").mouseleave(function(){
    $("#categories").hide(); 
  });
});

答案 1 :(得分:15)

最简单的答案是如何在没有jQuery的情况下执行此操作:将下拉列表放在触发元素中(例如导航列表中列表项中的下拉列表)。

如果你想要一些不太直接的东西,mouseleave可能会有帮助。

答案 2 :(得分:3)

Jquery悬停插件包括mouseenter和mouseleave函数,以下代码可以正常使用。

的javascript:

$(document).ready(function(){
    $('.dropdown').hover(
    function(){
        $(this).children('.sub-menu').slideDown('fast');
    },
    function () {
        $(this).children('.sub-menu').slideUp('fast');
    });
});

答案 3 :(得分:2)

这可能会有所帮助!首先隐藏“sub_menu”。

//html

<ul>
 <li id = "menu"> <a  href ="#"> Settings </a>
   <ul id = "sub_menu">
   <li> <a  href ="#"> page 1</a></li>
   <li> <a  href ="#"> page 2</a></li>
   </ul>
 </li>
 <li>SomeLink</li>
 <li>SomeLink 2</li>
</ul>

//Javascript

        $("#menu").hover(function() {
            $("#sub_menu").show();
        }, function() {
            $("#sub_menu").hide();
        });

答案 4 :(得分:2)

少数事情:

  • 将div放在“#moretab”中,以便从菜单中回到“more”不会将其关闭。
  • 从mouseleave添加延迟,这是一种更好的用户体验

    <div id="navbar">
        <ul>
            <li>tab1</li>
            <li>tab2</li>
            <li id="moretab">more
                <div id="categories">
                    <ul>
                        <li>cats</li>
                        <li>dogs</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    
    <script type="text/javascript">
    $(document).ready(function(){
    
    $("#moretab").hover(function(){
        $("#categories").slideDown("fast");
        clearTimeout(debounce);
    });
    
    $("#moretab").mouseleave (function() {
        debounce = setTimeout(closeMenu,400);
    });
    
    var debounce;
    var closeMenu = function(){
        $("#categories").slideUp("fast");
        clearTimeout(debounce);
    }
    
    });
    </script>