程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

我正在尝试在鼠标悬停和单击时构建下拉选项。我唯一遇到的问题是，当我将鼠标放在子元素上时，菜单会迅速隐藏。

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

解决方案

最后一点是隐藏选项：

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