Question

我在某些元素上使用jqueries mouseenter / mouseleave函数。

在Mouseenter上，一些内容通过ajax加载并向elemet添加一个菜单。在mouseleave上，菜单消失。

如果我在页面渲染时将元素悬停，菜单有时不会消失。它们保持可见。我无法通过演示代码重现这一点。

有什么建议吗？可能是.data（）的问题？

$(document).on('mouseenter', '._hoverflow', channels.smallMenu );
$(document).on('mouseleave', '._hoverflow', channels.smallMenu );

toggleMenu: function(p,i){
    if( p.data('loaded') === true  ){
        if( p.data('visible') === true ){ 
            i.stop(true,true).fadeOut('fast'); 
            p.removeClass('fadet').data('visible',false);  
        } 
        else{ 
            i.stop(true,true).fadeIn('fast'); 
            p.addClass('fadet').data('visible',true);   
        }
        return true; 
    } return false;
},
smallMenu: function(a){
    var p = $(this), cid = parseFloat( p.data('id') ), i = p.find('.channel-dropdown');
    if( channels.toggleMenu(p,i) ){ return false; }
    p.addClass('fadet').data('loaded',true).data('visible',true);
    var s = $.post( channels.vars.details, { id: cid } );
    s.done(function(data){ channels.menuTemplate( data, cid ).appendTo(p).stop(true,true).fadeIn('fast'); });

},

Answer 1

我认为问题在于，在设置p.data('loaded', true)之后，由于p.data('loaded') === true签入toggleMenu，您无法切换可见状态。

移动逻辑，以便您始终可以切换可见性，但只加载内容一次：

toggleMenu: function(p,i){
    if( p.data('visible') === true ){ 
        i.stop(true,true).fadeOut('fast'); 
        p.removeClass('fadet').data('visible',false);  
    } 
    else{ 
        i.stop(true,true).fadeIn('fast'); 
        p.addClass('fadet').data('visible',true);   
    }
},

smallMenu: function(a){
    var p = $(this), cid = parseFloat( p.data('id') ), i = p.find('.channel-dropdown');

    // Always toggle the menu visibility.
    channels.toggleMenu(p,i);

    // But only load the content once.
    if( p.data('loaded') === true ){ return false; }
    p.addClass('fadet').data('loaded',true).data('visible',true);
    var s = $.post( channels.vars.details, { id: cid } );
    s.done(function(data){ channels.menuTemplate( data, cid ).appendTo(p).stop(true,true).fadeIn('fast'); });
}

如果在页面加载时触发，则Jquery mouseenter事件将挂起

1 个答案: