Javascript jQuery鼠标滚轮-要滚动的几个部分

我尝试在我的新网站上使用jQuery鼠标滚轮。我在我的网站上实现它并没有遇到任何问题，但这个有点具体

基本上，我的网站显示了一堆在线图片，包含在#main div中：
（来源：）

因此，鼠标滚轮插件允许您水平浏览图片列表。到目前为止，没问题

但当您打开菜单时，它会打开另一个（较小）图片的水平列表，包含在#menu div中：
（来源：）

当然，如果菜单打开，我希望菜单被滚动，而不是内容

我想在菜单上添加一个“开放”类，然后对鼠标滚轮事件进行测试：

$('#menu-button').click(function() {
  $('#menu').toggleClass('open');
});

$('body, html, *').mousewheel(function(event, delta) {
  if($('#menu').hasClass('open')) {
    $('#menu').scrollLeft -= (delta * 40);
  } else {
    $('#main').scrollLeft -= (delta * 40);
  }
  event.preventDefault();
});

它似乎不起作用。你知道我该怎么做吗

---

编辑：这里有一个JSFiddle:

$（'#菜单）关闭
“
丢失。这是错别字吗？是的，这是错别字，在我的源代码中没关系。你能做一个JSFIDLE吗？这是一个JSFIDLE：谢谢你们的帮助！