切换菜单的DOM功能不起作用

Question

您好我正在尝试创建一个响应式切换菜单，我有我的标记，CSS和JavaScript代码。我认为问题可能出在某些DOM功能上。如果您看到第一个JavaScript块，那么这些功能是否可用。当我调整菜单大小时没有任何改变。我在Google Chrome和Firefox中测试了代码。我打开了许多网页，这些网页在这两个浏览器上都有切换菜单，但它们都有效。

    //HAML
    !!!
    %html
      %body
       .page
       .header
        .nav#nav
          %nav
          %h1
            %a.skip{:href => "#menu"} Explore this site:
          %ul#menu
            %li.menu-item
              %a{:href => "#typography"} Typography
            %li.menu-item
              %a{:href => "#color"} Color
            %li.menu-item
              %a{:href => "#example"} Examples
            %li.menu-item
              %a{:href => "#more"} More

//CSS
.enhanced .nav .skip{
  position: absolute;
  right: 0;
  top: 1.6em;
  background: #363636;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
}
.enhanced .nav ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}
.enhanced .nav ul.open {
  max-height: 20em;
}
@media screen and (min-width:39em) {
  .page .nav ul {
  overflow: auto;
  max-height: inherit;
  }
}

//Javascript    
if ( !("querySelector" in document && "addEventListener" in window &&   "getComputedStyle" in window) ) {
  return;
}
windows.document.documentElement.className += "enhanced";
var nav = document.querySelector( ".nav ul" ), navToggle = document.querySelector( ".nav .skip" );
if ( navToggle ) {
  navToggle.addEventListener( "click", function( e ) {
    if (nav.className == "open") {
      nav.className = "";
    }
    else {
      nav.className = "open";
    }
    e.preventDefault();
  }, false );
}                                              7,24          To