Проблемы с эмуляцией простого меню с помощью jQuery

Question

У меня есть 2 тега div, которые эмулируют выпадающее меню.При щелчке по внешнему блоку, внутренний блок показывает под ним несколько ссылок.Я хочу, чтобы внутренний div скрывал себя только тогда, когда мышь покинула любой div.

Вот как код не работает:

1. Щелкните по внешнему разделу.
2. Не вводите внутренний раздел.
3. Переместите мышьвверх, влево или вправо, чтобы покинуть внешний div.Внутренний div должен скрывать себя, но не скрывает.

Я понимаю, что мне нужно подключить событие mouseout к внешнему 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, когда япытался навести курсор мыши на это из-за проблем с высотой строки, которые имел мой код.После более тщательного изучения (1600-кратное увеличение в IE) я обнаружил свою проблему, и теперь у меня есть 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

Вот код, который вам нужен:

    $(".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();.

Answer 3

Поскольку .menu является дочерним для .toggleMenu, вы можете просто назначить событие mouseleave() для родителя, и оно повлияет на оба.Это основное преимущество использования mouseleave() против mouseout().

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

Рабочая демонстрация: http://jsfiddle.net/AlienWebguy/hNT6P/