懸停在jQuery中無法正常工作

Question

我在桌面視圖中將鼠標懸停時遇到問題。 每次將鼠標懸停（鼠標移出）父導航時，子頁面都不會關閉，而當我將鼠標懸停在外時，子頁面保持打開狀態。 如何解決這種懸停問題，即每次我將鼠標懸停時，子頁面也會隱藏。

我正在使用此代碼

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
})

或與in 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>