javascript - 在浏览器大小上执行不同的 jQuery(悬停与点击)

Question

在我的主导航中，我有一系列的子菜单。我的问题是，在常规浏览器大小下，我需要在悬停时打开菜单，而在移动 View 上，我需要在单击时打开菜单。我有 jQuery 可以工作，但是我无法关闭移动设备上的悬停和常规 View 上的点击

HTML

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

jQuery(代码有效但无法在移动/常规 View 中关闭)

$(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 属性将返回一个 bool 值。

所以在你的情况下:

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