Html 简单的非画布菜单不起作用

我已经创建了一个简单的主导航，但是当你点击菜单按钮时它不工作。代码看起来是正确的，但可能有一个断开，我没有看到。任何想法都将不胜感激

我正在工作的网站是：offcanvas.squarespace.com

HTML

尤伊

---

这是我为自己开发的用于非画布导航的jQuery

用我的实现。。。我将一个类应用于body标记。从这里开始，所有使导航扩展的CSS都从body.off-canvas开始。这样我就不需要在不同的元素上切换多个类

$(document).ready(function() {
    $('#open-nav').click(function() {
        $('#body').toggleClass('off-canvas');
    });
});

---

我可以告诉你，问题是你的活动类没有被应用到元素上。关于如何将活动类应用到元素上，你有什么想法吗？我对YUI没有任何经验，但我可以告诉你如何使用jQuery。你会如何使用jQuery？

    #main-navigation.active {
        -webkit-transform: translate(-13.755em, 0px);
        -moz-transform: translate(-13.755em, 0px);
        -o-transform: translate(-13.755em, 0px);
        -ms-transform: translate(-13.755em, 0px);
        transform: translate(-13.755em, 0px);
}

.menu-link {
      position: absolute;
      top: 15px;
      left:10em;
      color:black;
      font-size: 24px;
}

  Y.one('.menu-link').on('click', function(){
  Y.one('#main-navigation').toggleClass('active');
  Y.one('.container').toggleClass('active');

$(document).ready(function() {
    $('#open-nav').click(function() {
        $('#body').toggleClass('off-canvas');
    });
});