ドロップダウンを有効にする方法：1つの要素で768px幅以下をクリックし、別の要素で768pxより上に移動します

Question

768pxのウィンドウ幅を超えたときにdivにカーソルを置いたときに開くメニューが必要です。ウィンドウの幅が768px未満の場合はスパンをクリックします（このスパンはモバイルよりも上に隠れています）。私は、クリックまたはホバーが2つの画面サイズ（0-768pxおよび769およびそれ以上）の間で引き継ぐ問題を解決し続けます。

I set up a jsfiddle with an example of what I have so far.

そしてここでjQueryのは、私が使用しています：

function subNavDropdowns(width){ 
    if (width <= 767) { 
     $('span').click(function(e) { 
     $(this).parent().siblings().children('ul').removeClass('visible'); 
     $(this).parent().children('ul').toggleClass('visible'); 
     e.stopPropagation() 
     }); 
    } else { 
     $('div').hover(function(f) { 
     $(this).parent().siblings().children('ul').removeClass('visible'); 
     $(this).parent().children('ul').toggleClass('visible'); 
     f.stopPropagation() 
     }); 
    } 
} 
$(function() { 
    var onLoadWidth = $(window).width(); 
    subNavDropdowns(onLoadWidth); 
    $(window).resize(function() { 
     var resizeWidth = $(window).width(); 
     subNavDropdowns(resizeWidth); 
    }); 
}) 

を（デスクトップ上にカーソルを移動し、モバイル上でクリック）する前に、私は、関数（E）とe.stopPropagationを追加することによってこの問題を解決しました（）と同じですが、ホバーとクリックが同じ要素にあったときはいつもそうでした。今、私はモバイルでスパンのためのクリックでそれをやろうとしているし、デスクトップ上のdivのためのホバー、私は問題を抱えています。

Answer 1

コードに大きな問題があります。すべてのサイズ変更イベントで新しいイベントリスナーを追加しています。コードを別に分割することをお勧めします。

まず

、のが示す機能を選び出すと、あなたのメニューを非表示にしてみましょう：ウィンドウの幅を保持しているアクセス変数を作成し、その後

var showCurrentMenu = function() { 
    // Hide other menus: 
    $(this).parent().children() 
    .siblings("ul").addClass("visible"); 

    // Show closest menu 
    $(this).siblings("ul").addClass("visible"); 
}; 

、それを設定するためのメソッドを作成します。

var lastWindowWidth = 0; 
var setWindowWidth = function() { 
    lastWindowWidth = $(window).width(); 
} 

これで、必要なすべてのメソッドが完成しましたので、のイベントリスナーを一度に初期化できます。

$(document).ready(function() { 
    $(window).resize(setWindowWidth); 

    var mobileBtns = $("span"); 
    var desktopBtns = $("div"); 

    mobileBtns.click(showCurrentMenu); 
    desktopBtns.hover(showCurrentMenu); 


    // Initialize first window width: 
    setWindowWidth(); 

}); 

あなたは自分の<span> SやCSSメディアブレークポイントを使用して<div> Sを非表示にした場合、イベントリスナーを無効にする必要はありません。これは完全にあなたの問題を解決しないかもしれませんが、良い対策のために、私はあなたの `$（ドキュメント）.readyであなたの関数を入れてくださいと思います

mobileBtns.off("click", showCurrentMenu); 
desktopBtns.off("hover", showCurrentMenu);