javascript - jQuery slideToggle 方向!异常行为

Question

您好，我在我的元素中手动制作了一个以 980 像素启动的切换导航按钮。它工作正常，显示导航。

但是，当我尝试滑动切换菜单以使其以更优雅的方式显示时，高度增长的方向是从下到上。

我已附上有关该行为的视频。这是:https://www.screencast.com/t/wAkkHiRP5h

可在此处找到具有该功能的 jsFiddle:https://jsfiddle.net/grimhilt/7x49x6sk/

HTML 是:

<nav id="main-navigation" class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a href="#navbar-brand-centered" class="main-nav-trigger">
                <span>
                    <em aria-hidden="true"></em>
                </span>
            </a>
            <div id="logo" class="navbar-brand navbar-brand-centered">
                <a href="/">
                    <img src="assets/img/logo.png" alt="logo" class="img-responsive">
                </a>
            </div>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="navbar-brand-centered">
            <ul class="nav navbar navbar-nav navbar-left">
                <li><a href="#">ALbums</a></li>
                <li><a href="#">Boxes</a></li>
                <li><a href="#">DVD Cases</a></li>
                <li><a href="#">Shop</a></li>
            </ul>
            <ul class="nav navbar navbar-nav navbar-right">
                <li><a href="#">About us</a></li>
                <li><a href="#">Journal</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

CSS:

#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered  {
    /*
        show primary nav - mobile only
        :target is used to show navigation on no-js devices
    */
    display: block;
}
#main-navigation #navbar-brand-centered {
    position: absolute;
    background-color: #9e865f;
    z-index: 2;
    top: 100px;
    left: 0;
    width: 100%;
    display: none;
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    text-align: center;
    border: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

jQuery 是:

var mainHeader = $('#main-navigation');

mainHeader.on('click', '.main-nav-trigger', function(event){
    // open primary navigation on mobile
    event.preventDefault();
    mainHeader.toggleClass('nav-open');
    $( "#navbar-brand-centered" ).slideToggle( "slow" );
});

如何让#navbar-brand-centered 高度从上到下动画化？非常感谢!

Answer 1

只需删除这些行:

mainHeader.toggleClass('nav-open');
$('#navbar-brand-centered').toggleClass('is-visible');

并将display:none添加到main-navigation id

var mainHeader = $('#main-navigation');
mainHeader.on('click', '.main-nav-trigger', function(event) {
  // open primary navigation on mobile
  event.preventDefault();
  //        mainHeader.toggleClass('nav-open');
  //      $('#navbar-brand-centered').toggleClass('is-visible');
  $("#navbar-brand-centered").slideToggle("slow")
});

#main-header {
  position: absolute;
  min-height: 100px;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  display: table;
}

#main-navigation {
  display: none;
  display: table-cell;
  vertical-align: middle;
  padding: 45px 0;
  margin-bottom: 0;
  background-color: #151725;
  border: none !important;
}

#main-navigation.nav-open #navbar-brand-centered,
#navbar-brand-centered ul:target {
  /*
            show primary nav - mobile only
            :target is used to show navigation on no-js devices
        */
  display: block;
}

#main-navigation #navbar-brand-centered {
  position: absolute;
  background-color: #9e865f;
  z-index: 2;
  top: 100px;
  left: 0;
  width: 100%;
  display: none;
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  text-align: center;
  border: none;
  /*-webkit-backface-visibility: hidden;*/
  /*backface-visibility: hidden;*/
}

#main-navigation.nav-open #navbar-brand-centered {
  display: block;
}

#main-navigation .main-nav-trigger {
  float: right;
  display: inline-block;
  height: 100%;
  text-transform: uppercase;
  right: 0;
}

#main-navigation .main-nav-trigger em,
#main-navigation .main-nav-trigger em::after,
#main-navigation .main-nav-trigger em::before {
  /* this is the menu icon */
  display: block;
  position: relative;
  height: 2px;
  width: 22px;
  background-color: #9e865f;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-header">
  <nav id="main-navigation" class="navbar navbar-default">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a href="#navbar-brand-centered" class="main-nav-trigger">
          <span>
				        <em aria-hidden="true"></em>
			        </span>
        </a>
        <div id="logo" class="navbar-brand navbar-brand-centered">
          <a href="/">
            <img src="assets/img/logo.png" alt="logo" class="img-responsive">
          </a>
        </div>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div id="navbar-brand-centered">
        <ul class="nav navbar navbar-nav navbar-left">
          <li><a href="#">ALbums</a></li>
          <li><a href="#">Boxes</a></li>
          <li><a href="#">DVD Cases</a></li>
          <li><a href="#">Shop</a></li>
        </ul>
        <ul class="nav navbar navbar-nav navbar-right">
          <li><a href="#">About us</a></li>
          <li><a href="#">Journal</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</header>