jquery - 交换类时平滑下拉菜单中的过渡

Question

目标

在展开移动导航时创建平滑的下拉菜单。

背景

我目前有一个移动导航菜单的原型(prototype)。

当您单击菜单时，移动导航会通过交换具有 height: auto

的类来“扩展”

我确实尝试将转换添加到 .expanded CSS 类，但最终无法正常工作，因为 jQuery 似乎只是突然交换类。

问题

我如何调整我的 CSS 和/或 jQuery 来完成更平滑的下拉菜单。

当前状态

我在 CodePen 上有演示

HTML

<div class="nav-mobile-wrapper">
  <div class="collapsed">
    <nav class="nav-mobile">
      <ul>
        <li><a href="/trends">Trends<i class="fa fa-bar-chart-o ml6"></i></a></li>
        <li><a href="/docs">Docs<i class="fa fa-file-o ml6"></i></a></li>
        <li><a href="/images">Images<i class="fa fa-file-photo-o ml6"></i></a></li>
        <li><a href="/videos">Videos<i class="fa fa-film ml6"></i></a></li>
      </ul>
    </nav>
  </div>
  <a href="#" class="nav-mobile-button">Additional Resources <i class="fa fa-bars ml6"></i></a>
</div>

CSS

.nav-mobile-wrapper {
  width: 768px;
  max-width: 100%;
  position: relative;
}
.collapsed {
  height: 0px;
  width: 100%;
  overflow: hidden;
}
.nav-mobile {
  background-color: #c0c0c0;
  background-image: url('https://d13yacurqjgara.cloudfront.net/assets/noise-f1-99be850299aaf3f1e91225fa7a97228c.gif');
  width: 100%;
  text-align:right;
}
.nav-mobile-button {
  display: block;
  text-decoration: none;
  background-color: #444;
  font-size: 16px;
  line-height: 30px;
  text-align: right;
  padding-right: 10px;
  color: #fff;
}
.nav-mobile ul {
  margin: 0;
  list-style-type: none;
  font-size: 16px;
  line-height: 30px;
  padding-left: 0;
}
.nav-mobile ul li {
  padding-right: 10px;
}
.nav-mobile ul li a {
  text-decoration: none;
  display: block;
  color: #333;
}
.nav-mobile ul li:hover {
  background-color: #ba222b;
}
.nav-mobile ul li a:hover {
  color: #f3f3f3;
}
.nav-mobile ul li:hover,
.nav-mobile ul li a:hover {
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.expanded {
  height: auto;
}

JS

$('.nav-mobile-wrapper').find('a[href="#"]').on('click', function (e) {
  e.preventDefault();
  this.expand = !this.expand;
  $(this).text(this.expand?"Close":"Menu");
  $(this).closest('.nav-mobile-wrapper').find('.collapsed, .expanded').toggleClass('collapsed expanded');
});

Answer 1

我个人喜欢带有这些东西的 jquery 路由，给你!

http://codepen.io/anon/pen/Ejsbu

edit- 切换到 slideToggle()，更简单!