下拉選項在jQuery中不起作用

Question

我正在嘗試在鼠標懸停和單擊時構建下拉選項。 我唯一的問題是，當我將鼠標放在on子元素上時，菜單會快速隱藏。

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

Answer 1

最后一點是隱藏選項：

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