クリックハンドラが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() { ... });