Question

当我在窗口宽度超过768px时悬停在div上时，我需要一个菜单打开，当我在窗口宽度低于768px时点击一个跨度时菜单也打开（此跨度隐藏在移动设备上方）。我一直遇到点击或悬停在两种屏幕尺寸（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

您的代码存在一个大问题：您在每个resize事件上附加新的事件侦听器。我建议以不同的方式拆分代码。

首先，让我们单独显示和隐藏菜单的功能：

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();

});

如果您只是使用css媒体断点隐藏<span>或<div>，则无需禁用事件侦听器。如果你做想要禁用它们，请按照以下方式进行操作：

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

如何激活下拉列表：在一个元素上单击768px宽度以下，并在另一个元素

1 个答案: