點擊處理程序干擾CSS懸停狀態

Question

在大屏幕上，我希望在懸停時顯示下拉菜單，但在移動設備上，我希望將它們排列爲手風琴。

我的jQuery與我的CSS衝突。在移動設備上，點擊li會產生各種問題：事件一遍又一遍地激發，如果我調整到較大的視口，則下拉菜單保持打開狀態，並禁用:focus和:hover規則。

薩斯

// If bigger screen, show the submenu on hover or focus 
ul.sub { 
    display: none; 
} 

body.desktop { 
    li.dropdown:hover, 
    li.dropdown:focus { 
    > ul.sub { 
     dispay: block; 
    } 
    } 
} 

的JavaScript

if ($('body.desktop').length < 1) { 
    $('li.dropdown > a').on('click', function(e){ 
     $(this).parent().find('.dropdown-menu').slideToggle('fast'); 
     e.preventDefault(); 
    });  
    } else { 
    return false; 
    } 

Answer 1

問題是由.slideToggle()方法施加的style="display:none;"規則。我需要設計一種方法來在較大的視口上覆蓋這一點。

的JavaScript

$(window).resize(function(){ 
    if (window.innerWidth > 795) { 
     $('.dropdown-menu').removeAttr('style'); 
    } 
    }); 

然後，從一次次射擊停止的情況下，hat-tip to this solution：

$("li.dropdown").unbind().click(function() { ... });