ドロップダウンオプションがjQueryで動作しない

Question

私はマウスオーバーでクリックしたときにドロップダウンオプションを構築しようとしています。私がそれを持っている唯一の問題は、マウスを子要素の上に置くと、メニューがすばやく隠れてしまうことです。

の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'); 
    }); 

のいずれかを使用するか、前の行と同じようにクリックします。そして、あなたが非表示にすることができます：私はここ..マウスオーバーとマウスアウトするホバーを交換したがdidntの仕事、同じことを示し

OK

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