1

在我的主导航中，我有一系列子菜单。我的问题是，在常规浏览器大小上，我需要在悬停时打开菜单，而在移动视图上，我需要在单击时打开它。我有 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();
  });
   }
4

2 回答 2

3

看看这个链接。

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

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

所以在你的情况下：

if(window.matchMedia("(min-width: 768px)").matches){
  //your desktop code
}
else{
  //your mobile code.
}
于 2013-11-05T18:44:25.083 回答
1

@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();
        });
    }
}
于 2013-11-05T19:52:54.983 回答