悬停在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>