点击处理程序干扰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() { ... });