悬停在jquery中无法正常工作

Question

我的桌面视图中的jquery悬停有问题。每次我徘徊（鼠标移出）父导航时子页面都不会关闭，在我将鼠标悬停在子页面后保持打开状态。如何修复这种悬停，每次我将鼠标悬停在子页面上时也会隐藏。

我使用此代码

jQuery('.dropdown').hover(function(){
    if(!jQuery('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!jQuery(this).hasClass('open')) { // Keeps it open when hover it again
            jQuery('.dropdown-toggle', this).trigger('click');
        }
    }
});

请参阅图片以获得更好的可视化效果

Answer 1

它不会自动返回mouseout。你需要指定一些mouseout的功能

jQuery('.dropdown').hover(function(){
    if(!jQuery('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!jQuery(this).hasClass('open')) { // Keeps it open when hover it again
            jQuery('.dropdown-toggle', this).trigger('click');
        }
    }
});
jQuery('.dropdown').mouseout(function(){ // for mouse out event
//do stuff
})

或在hover()

中

jQuery('.dropdown').hover(function(){
        if(!jQuery('.navbar-toggle').is(':visible')) { // disable for mobile view
            if(!jQuery(this).hasClass('open')) { // Keeps it open when hover it again
                jQuery('.dropdown-toggle', this).trigger('click');
            }
        }
    },function(){ // for mouse out event
        jQuery(this).removeClass('open')
    })

工作示例

$('a').hover(function(){
$(this).css('color','red')
},function(){
$(this).css('color','black')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>ppp</a>