Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > JQuery выпадающее меню (помогите доделать)


Автор: DooZ 17.1.2011, 18:25
Здравствуйте,

есть меню:
Код

<div class="left_column">
    <ul class="menu">
        <li><a href="/"><span><span>ГЛАВНАЯ</span></span></a></li>
        <li><a href="javascript://" id="drop_menu" abbr="#drop_menu_1"><span><span>ТЕСТ</span></span></a></li>
    </ul>
</div>

<div class="drop_menu" id="drop_menu_1">
    <p><a href="#">раздел меню</a></p>
    <p><a href="#">раздел меню</a></p>
    <p><a href="#">раздел меню</a></p>
</div>


есть подгрузка скрипта:
Код

$(function()
{
    $('#drop_menu').dropMenu();
});


и сам скрипт
Код

$(function()
{
    $.fn.dropMenu = function()
    {        
        var id_tip;
        if ($(this).attr('abbr')) id_tip = $(this).attr('abbr');
        if (!id_tip) return;
        
        $(this).toggle(function(event)
        {
            $(id_tip)
            .css({
                left: event.pageX,
                top: event.pageY,
                display: 'none'
            })
            .html($(id_tip).html())
            .appendTo('body')
            .fadeIn(100);
        }, function(event)
        {
             $(id_tip).fadeOut(100);
        });
    }
});


все отлично работает, т.е. при нажатии на ссылку "ТЕСТ" в меню, открывается выпадающее меню (появляется), при повторном нажатии, оно пропадает
НО вопрос в следующем, как мне сделать:
меню должно появляться при клике, как сейчас, НО исчезать, когда мышь выходит за границы самого появившегося меню ИЛИ за границы ссылки (при клике на которую мы показали меню)

т.е. что-то типа
$(id_tip).mouseout(....) не работает...

заранее благодарю

Автор: mcTep 24.1.2011, 15:56
Цитата(DooZ @  17.1.2011,  18:25 Найти цитируемый пост)
т.е. что-то типа
$(id_tip).mouseout(....) не работает...


попробуйте http://jqapi.com/#p=mouseleave


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)