小编Jef*_*ff 的帖子

我正在寻找一种让 JavaScript 理解多个媒体查询的方法。此时我有以下代码来检查浏览器的宽度，但我想创建更多查询。Google（和 Stack）只向我展示了我已经编写的代码。我看到的唯一方法是使用 enquire.js，但我想知道是否没有其他方法。

$(function() {
// Screen width check 
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 992px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// Run function mq (check screen width)
function WidthChange(mq) {
    // Screen size +992px
    if (mq.matches) {
        .....
    }
    // Screen size -992px
    else {
        .....           
    }
// End widthChange(mq) function
}
// End Function script
});

所以这段代码只会检查 min-width: 992px，但现在我想要至少 3 个。

当您单击.menuButtonjquery时，将添加一个名为的类active。此Jquery代码可在Windows和Android上运行，但iOS除外（已通过Chrome和Safari测试）。

HTML5

<div class="menuButton">
  Menu Button
</div>
<div class="navmenu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Something</a></li>
  </ul>
</div>

jQuery的

var removeClassVar = true;
$('.menuButton').on('click', function() {
  $('.navmenu').toggleClass('active');
  removeClassVar = false;
});
$('.navmenu').on('click', function() {
  removeClassVar = false;
});
$(document).on('click', function() {
  if (removeClassVar == true) {
      $('.navmenu').removeClass('active');
  }
  removeClassVar = true;
});

CSS3

.menuButton {
  display:block;
  cursor:pointer;
}
.navmenu {
  display:none;
}
.navmenu.active {
  display:block;
}

问题：单击.menuButton菜单时将显示，但是单击html菜单时将不运行removeClass('active')。仅在iOS上会出现此问题。

JsFiddle：https：//jsfiddle.net/dkg7tyu0/

更新的JSFiddle：https …