jQuery slideToggle方向！异常行为

Question

您好我已经手动制作了一个切换导航按钮，该按钮在我的项目中以980px开始。它工作正常，它显示导航。

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

我附上了一个带有该行为的视频。这是：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-center高度从上到下制作动画呢？非常感谢！

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>

Answer 2

好的，我认为这里的关键是理解.slideToggle()的作用。

显示时display:block;和隐藏时display:none;之间切换。它通过在元素高度上滑动动画来实现这一点。

在您的代码中，您也在弄乱显示属性：

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

mainHeader.toggleClass('nav-open');

所以你添加display:block;然后jQuery fucntion正在转向它。

所以，如果你删除它，它的工作原理。见eaxmple：

    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: 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/3.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>