Параметр раскрывающегося списка не работает в jQuery - PullRequest
Новая
       1

Параметр раскрывающегося списка не работает в jQuery

1 голос
/ 12 сентября 2011

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

JQuery код: 

var navPos = $("#topNav").position().top; // ignore this line
// menu drop options
$('.repeat, .recitor, .volume, .bandwidthOption').bind('dropOption', function(e, force) {
    var force = force || 'toggle';

    if ($(this).hasClass('repeat'))
        var optionName = 'repeat';
    else if ($(this).hasClass('recitor'))
        var optionName = 'recitor';
    else if ($(this).hasClass('volume'))
        var optionName = 'volume';
    else if ($(this).hasClass('bandwidthOption'))
        var optionName = 'bandwidthOption';
    else
        return;

    var optionSubName = $(this).find('ul').attr('class');
    var position = $(this).position();
    position.top = navPos;
    var isActive = $(this).hasClass('active');

    if ((isActive && force != 'show') || (force && force == 'hide'))
    {
        $(this).removeClass('active');
        $('.'+optionSubName).hide();
        if (optionName == 'recitor') /* ie fix - z-index issue */
            $('.logoBox').show();
    }
    else
    {
        $(this).addClass('active');
        $('.'+optionSubName).show();
        $('.'+optionSubName).css('left',position.left+'px');
        if (optionName == 'recitor') /* ie fix - z-index issue */
            $('.logoBox').hide();
    }
});
$('.repeat, .recitor').click(function() {
    $(this).trigger('dropOption');
    return false;
});
$('.volume, .bandwidthOption').hover(function() {
    $(this).trigger('dropOption', 'show');
},function() {
    $(this).trigger('dropOption', 'hide');
});

Демо меню: http://jsbin.com/ozokir/2

1 Ответ

1 голос
/ 12 сентября 2011

Последний бит скрывает параметры: 

$('.volume, .bandwidthOption').hover(function() {
    $(this).trigger('dropOption', 'show');
},function() {
    $(this).trigger('dropOption', 'hide');
});

Наведите курсор только на параметр связи.Чтобы решить эту проблему, вы можете использовать: 

$('.volume, .bandwidthOption').mouseover(function() {
        $(this).trigger('dropOption', 'show');
    });

или щелкнуть, как в предыдущей строке.Тогда вы можете скрыть с помощью: 

$('.dropOption').mouseout(function() {
            $(this).trigger('dropOption', 'hide');
        });
...