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

在我的主导航中，我有一系列的子菜单。我的问题是，在常规浏览器大小上，我需要在鼠标悬停时打开菜单，在移动视图上，我需要在单击时打开菜单。我有jQuery，但我不能关闭手机上的鼠标悬停和单击常规视图

HTML

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

**还尝试了**（针对浏览器大小，代码不再有效）

var$browserWidth=window.innerWidth | | document.documentElement.clientWidth；
如果（$browserWidth>768）{
$（'.main菜单li'）。悬停（函数（）{
$（this.find（'.subMenu'）.stop（）.fadeIn（）；
}，函数（）{
$（this.find（'.subMenu'）.stop（）.fadeOut（）；
});
}else if（$browserWidth<768）{
$（'.main菜单li'）。单击（函数（）{
$（this.find（'.subMenu'）.stop（）.slideToggle（）；
});
}

退房

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

基本上，有一个

matchMedia（）

函数，它的

matches

属性在传递css媒体查询时将返回一个布尔值

因此，在你的情况下：

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

退房

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

基本上，有一个

matchMedia（）

函数，它的

matches

属性在传递css媒体查询时将返回一个布尔值

因此，在你的情况下：

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

---

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

---

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

---

是否需要删除移动设备上的悬停事件？由于监听器永远不会启动，实际上，您将花费更多的资源来检查视口大小，而不是仅仅让它离开。不幸的是，我这样做是因为当我向客户端演示时，我必须在浏览器上显示“调整大小”，当两个事件启动时，它会变得丑陋，否则，我可能可以让它使用CSS隐藏和设置所有内容的样式，但是在用户交互（单击）上，你必须使用jQuery，除非有一些我不知道的新psuedo类。另外，CSS3转换在很多浏览器中都不起作用。您是否需要删除手机上的悬停事件？由于监听器永远不会启动，实际上，您将花费更多的资源来检查视口大小，而不是仅仅让它离开。不幸的是，我这样做是因为当我向客户端演示时，我必须在浏览器上显示“调整大小”，当两个事件启动时，它会变得丑陋，否则，我可能可以让它使用CSS隐藏和设置所有内容的样式，但是在用户交互（单击）上，你必须使用jQuery，除非有一些我不知道的新psuedo类。此外，CSS3转换在很多浏览器中都不起作用，因此在旧版本的IE中也不起作用。也许值得换一种方式使用，因此媒体查询会检查最大宽度。这样，如果

window.matchMedia

不是一个函数，那么它将是错误的。移动浏览器更可能有更广泛的实现覆盖范围嗯，首先谢谢。这似乎解决了我关闭/打开悬停与单击的直接问题，但是如果我加载的浏览器小于768 px，然后扩展它，菜单仍然绑定到单击。。。。需要考虑一个浏览器调整大小的功能好吧-这是一个非常罕见的用例，所以你需要评估它是否值得，因为点击并不会真正损害用户体验。（请记住，如果您在移动设备上，您无法调整浏览器的大小，因此，如果您在桌面上，并且您从小到大，这只是一个“问题”）。综上所述，注册一个事件监听器是可能的——进一步向下滚动我链接的页面，它会告诉你如何注册！正如我所说的，这明确地为我指明了正确的方向，感谢lota显然在旧版本的IE中不起作用。也许值得换一种方式使用它，因此媒体查询检查max width。这样，如果

window.matchMedia

不是一个函数，那么它将是错误的。移动浏览器更可能有更广泛的实现覆盖范围嗯，首先谢谢。这似乎解决了我关闭/打开悬停与单击的直接问题，但是如果我加载的浏览器小于768 px，然后扩展它，菜单仍然绑定到单击。。。。需要考虑一个浏览器调整大小的功能好吧-这是一个非常罕见的用例，所以你需要评估它是否值得，因为点击并不会真正损害用户体验。（请记住，如果您在移动设备上，您无法调整浏览器的大小，因此，如果您在桌面上，并且您从小到大，这只是一个“问题”）。综上所述，注册一个事件监听器是可能的——进一步向下滚动我链接的页面，它会告诉你如何注册！就像我说的，这肯定给我指明了正确的方向，非常感谢