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

Мне нужно, чтобы меню открывалось, когда я наводил курсор на div, когда ширина окна превышает 768 пикселей, и меню также открывалось, когда я нажимаю диапазон, когда ширина окна меньше 768 пикселей (этот диапазон скрыт над мобильным устройством). У меня продолжают возникать проблемы, когда щелчок или наведение курсора переносятся между двумя размерами экрана (0-768px и 769 и выше).

Я настроил jsfiddle с примером того, что у меня есть.

И вот 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 на рабочем столе, у меня возникают проблемы.


javascript click jquery responsive hover
person bluebomber    schedule 03.05.2016    source источник
comment
Это может не решить вашу проблему полностью, но на всякий случай я бы обязательно поместил вашу функцию в ваш $(document).ready(), поскольку вы имеете дело с элементами, которые будут загружены в DOM.   -  person Carl Edwards    schedule 03.05.2016

Ответы (1)


arrow_upward
0
arrow_downward

В вашем коде есть одна большая проблема: вы прикрепляете новые прослушиватели событий к каждому событию изменения размера. Я бы предложил разделить код по-другому.

Для начала выделим функции, которые показывают и скрывают ваши меню:

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 media, нет необходимости отключать прослушиватели событий. Если вы действительно хотите их отключить, вот как это сделать:

mobileBtns.off("click", showCurrentMenu);
desktopBtns.off("hover", showCurrentMenu);
person user3297291    schedule 03.05.2016
comment
Это очень интересно, и спасибо, что показали мне, как лучше разделить мой код! Это очень чисто. Я никогда раньше не знал о .off(). Может пригодится в будущем. Я посмотрю, как это работает, спасибо! - person bluebomber; 03.05.2016
comment
Есть много способов решить вашу проблему, если вы убедитесь, что вы не присоединили несколько прослушивателей событий внутри других прослушивателей событий случайно (например, .click или .hover или .on ). Дай мне знать, если тебе еще понадобится помощь. - person user3297291; 03.05.2016