Как активировать выпадающие списки: нажмите ниже ширину 768 пикселей на один элемент и наведите курсор над 768px на другой элемент

Question

Мне нужно открыть меню, когда я нависаю над div, когда ширина окна выше 768 пикселей, и меню также открывается, когда я щелкните диапазон, когда ширина окна 768px ниже (этот диапазон скрыт выше мобильного). У меня возникают проблемы, когда щелчок или зависание переносится между двумя размерами экрана (0-768 пикселей и 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.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> с или <div> с с помощью CSS медиа контрольных точек, нет необходимости отключать слушателей событий. Если вы сделать хотите отключить их, вот как вы можете:

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