如何在JavaScript中编写slideToggle？

Question

由于某种原因，我无法弄清楚，我的jQuery slideToggle打开和关闭“汉堡包”菜单不适用于移动设备。它适用于Chrome和Firefox开发工具，但不适用于我的实际移动设备。我究竟做错了什么？

笔：http://codepen.io/kiddigit/pen/VjayNK

$('.hamburger').on('click', function(e) {
  e.preventDefault();
  $('.menu').toggleClass('slide-down');
});

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
@import url('http://fonts.googleapis.com/css?family=Roboto:400,700');
 *,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
html,
body {
  height: 100%;
}
body {
  font: 1em'Roboto', sans-serif;
  color: #555;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
ul {
  list-style: none;
  max-width: 800px;
  margin: 0 auto;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
h1 {
  padding: 30px 0;
  font: 1.5em'Open Sans', sans-serif;
  text-align: center;
}
nav {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
}
ul a {
  display: block;
  padding: 20px;
  padding-right: 0 !important;
  /* important overrides media queries */
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #aaa;
  cursor: pointer;
  text-decoration: none;
}
ul a:hover {
  background: #eee;
}
nav li {
  float: left;
  width: 20%;
  border-right: 1px solid #ddd;
}
nav li:last-child {
  border-right: none;
}
@media only screen and (max-width: 480px) {
  .hamburger {
    padding: 15px;
    display: block;
  }
  .line {
    border-bottom: 4px solid #bbb;
    width: 35px;
    margin-bottom: 6px;
  }
  .line:last-child {
    margin-bottom: 0;
  }
  nav li {
    width: 100%;
  }
  .menu {
    height: 0;
    overflow: hidden;
    transition: height 0.3s linear;
  }
  .slide-down {
    height: 262px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <a href="#" class="hamburger">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </a>
    <ul class="clearfix menu">
      <li><a href="header.html">Home</a>
      </li>
      <li><a href="page3.html">Gift Baskets and Catering</a>
      </li>
      <li><a href="page8.html">Tasting Calendar</a>
      </li>
      <li><a href="page7.html">Membership</a>
      </li>
      <li><a href="page8.html">Special Events</a>
      </li>
      <li><a href="page9.html">Contact</a>
      </li>
    </ul>
  </nav>
</header>