Question

我有2个div标签，用于模拟下拉菜单。单击外部div时，内部div会在其下方显示一些链接。我希望内部div仅在鼠标离开div时隐藏自己。

以下是代码失败的原因：

点击外部div。
请勿输入内部div。
向上，向左或向右移动鼠标以离开外部div。内部div应该隐藏自己，但不会。

我知道我需要将鼠标输出事件挂钩到外部div，但是当我这样做时，它会在我尝试输入时隐藏内部div。

当鼠标离开div时，如何让内部div隐藏起来？

<style type="text/css">
    div.toggleMenu { position: relative; }
    div.menu { position: absolute; left: -3px; top: 19px; display: none; }
</style>
<div class="toggleMenu">
    Toggle Menu
    <div class="menu">
        <ul>
            <a href="http://www.google.com/"><li>Google</li></a>
            <a href="http://www.yahoo.com/"><li>Yahoo</li></a>
            <a href="http://www.bing.com/"><li>Bing</li></a>
        </ul>
    </div>
</div>
<script type="text/javascript">
    // Toggle the menu.
    $('.toggleMenu').click(function ()
    {
        $(this).find('.menu').toggle();
    });

    // Hide the menu when the mouse leaves the tag.
    $('.menu').mouseleave(function ()
    {
        $(this).hide();
    });
</script>

更新：当我尝试鼠标悬停时内部div消失的部分问题是由于我的代码所带来的行高问题。仔细检查后（在IE中放大1600倍）我发现了我的问题，现在我已经让jquery以编程方式设置了高度。以下是感兴趣的人的最终代码：

$('.toggleMenu').click(function ()
{
    if ($(this).find('.menu').css('display') == 'none')
    {
        // The menu needs to be positioned programmatically for the
        // height due to the differences among browser interpretations of height.
        var height = $('.toggleMenu').height() - 1;
        $(this).find('.menu').css('top', height + 'px');
        $(this).find('.menu').css('left', '-3px');
        $(this).find('.menu').show();
    }
    else
    {
        $(this).find('.menu').hide();
    }
});

// Hide the menu when the mouse leaves the tag.
$('.toggleMenu').mouseleave(function ()
{
    $(this).find('.menu').hide();
});

Answer 1

我会尝试： http://jsfiddle.net/shaneburgess/k5WRG/1/

  // Toggle the menu.
    $('.toggleMenu').click(function ()
    {
        $(this).find('.menu').toggle();
    });

    // Hide the menu when the mouse leaves the tag.
    $('.toggleMenu').mouseleave(function ()
    {
        $(this).find(".menu").hide();
    });

Answer 2

由于.menu是.toggleMenu的孩子，您可以简单地将mouseleave()事件分配给父母，这会影响两者。这是使用mouseleave()与mouseout()的主要好处。

$('.toggleMenu').mouseleave(function ()
{
    $(this).children('.menu').hide();
});

工作演示：http://jsfiddle.net/AlienWebguy/hNT6P/

Answer 3

以下是您需要的代码：



    $(".toggleMenu").live({
      click: function() {
        $(this).find('.menu').show();
      },
      mouseleave: function() {
        $(this).find('.menu').hide();
      }
    });

因为您使用的是切换功能，除非您再次点击，否则它不会再次隐藏。这是JSFiddle http://jsfiddle.net/Skooljester/9Dfjr/10/

更新：您可以将$(this).find('.menu').show();行缩短为$('.menu').show();，该行也适用于.hide();行。

使用jQuery模拟一个简单的菜单

3 个答案: