JQuery Slide切换没有高度动画

Question

我正在使用jquery中的.toggle('slide');来隐藏和显示我的子菜单，虽然我想知道为什么动画会有所不同。它从左向右滑动，向上滑动而不是固定高度，从左向右滑动。

HTML：

<div class="full">
  <div class="pull-left text-left">
    <div class="menu-header-links-container">

      <ul id="menu-header-links" class="menu">
        <li class="a"><a href="#a" class="open-btn">Menu 1</a></li>
        <li class="b"><a href="#b" class="close-btn">Menu 2</a> </li>
      </ul>
    </div>

    <ul class="mini-menu-a">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
    </ul>
    <div class="mini-menu-b">
      <div class="footer-links clearfix">
        <ul id="menu-footer-links" class="menu">
          <li><a href="#">a</a></li>
          <li><a href="#">b</a></li>
          <li><a href="#">c</a></li>
          <li><a href="#">d</a></li>
      </div>
    </div>
  </div>
</div>

CSS：

.full {
  z-index: 1;
  background: #a97b3e;
  padding: 30px 60px;
  margin: 0;
  width: 100%;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  margin-right: 20px;
}

ul li a {
  color: #fff;
}

.navbar.navbar-default .menu-header-links-container {
  float: left;
  padding: 30px 0;
}

.mini-menu-a,
.mini-menu-b {
  border: 1px solid #fff;
  display: none;
  ;
  float: left;
  list-style: none;
  margin-left: 20px;
}

ul#menu-header-links {
  float: left
}

脚本：

$('.menu-header-links-container .a a').on('click', function() {
  $(".mini-menu-a").toggle('slide');
  $(".mini-menu-b").hide();
  $(this).toggleClass('open-btn').removeClass('close-btn');
  $(".menu-header-links-container .follow a").toggleClass('close-btn').removeClass('open-btn');
});
$('.menu-header-links-container .b a').on('click', function() {
  $(".mini-menu-b").toggle('slide');
  $(".mini-menu-a").hide();
  $(this).toggleClass('open-btn').removeClass('close-btn');;
  $(".menu-header-links-container .subscribe a").toggleClass('close-btn').removeClass('open-btn');
});

I'm using this reference.

JS Fiddle here