在浏览器大小上执行不同的jQuery（悬停与点击）

Question

在我的主导航中，我有一系列子菜单。我的问题是，在常规浏览器尺寸上，我需要在悬停和移动视图上打开菜单，我需要它在点击时打开。我有jQuery工作，但我不能关闭移动设备上的悬停和点击常规视图

HTML

  <ul class="mainMenu">
     <li>
       ITEM
       <ul class="subMenu">
          <li></li>
       </ul>
      </li>
    </ul>

jQuery （代码有效，但无法关闭移动/常规视图）

$(document).ready(function () {
  $('.mainMenu li').hover(function () {
    $(this).find('.subMenu').stop().fadeIn();
  }, function () {
    $(this).find('.subMenu').stop().fadeOut();
  });

  $('.mainMenu li').click(function () {
    $(this).find('.subMenu').stop().slideToggle();
  });
});

**还试过**（针对浏览器大小，代码不再起作用）

var $browserWidth = window.innerWidth || document.documentElement.clientWidth;
    if ($browserWidth > 768) {
      $('.mainMenu li').hover(function () {
    $(this).find('.subMenu').stop().fadeIn();
  }, function () {
    $(this).find('.subMenu').stop().fadeOut();
  });
    } else if($browserWidth < 768) {
      $('.mainMenu li').click(function () {
    $(this).find('.subMenu').stop().slideToggle();
  });
   }

Answer 1

查看this link。

详细介绍了如何在JavaScript中使用媒体查询。

基本上，有一个matchMedia()函数，当你传递css媒体查询时，matches属性将返回一个布尔值。

所以在你的情况下：

if(window.matchMedia("(min-width: 768px)").matches){
  //your desktop code
}
else{
  //your mobile code.
}

Answer 2

@Ed Hinchcliffe让我走上了正确的轨道......这就是最终工作的答案

$(document).ready(function () {
    menuStuff();
});

$(window).resize(function () {
    menuStuff();
});

function menuStuff() {
    var $browserWidth = window.innerWidth || document.documentElement.clientWidth;
    if ($browserWidth > 768) {
        $('.mainMenu > li').unbind().bind({
            mouseenter: function (e) {
                $(this).find('.subMenu').stop().fadeIn();
            },
            mouseleave: function (e) {
                $(this).find('.subMenu').stop().fadeOut();
            }
        })
    } else {
        $('.mainMenu > li').unbind().click(function () {
            $(this).find('.subMenu').stop().slideToggle();
        });
    }
}