底部导航栏显示/隐藏一键 - CSS

Question

在我的手机屏幕上，我在主要内容的底部有一个标题弹出的导航栏。

当我触摸标题时，我希望动画过渡以显示整个隐藏的div。

然后，当我再次点击标题时，它会回到其初始位置。

我设法只用jQuery做第一部分没有动画。 如果您对完整CSS有任何建议，我也感兴趣。

＆＃13;

＆＃13;

$('.open-nav').click(function () {
    $('.navbar-bottom').css('bottom', '0');
});

＆＃13;

.container {
    width: 200px;
    border: 1px solid black;
    height: 100vh;
}
.open-nav {
    cursor: pointer;
}
.navbar-bottom {
    height: 158px;
    background-color: yellow;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: -112px;
    width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <p>WHAT OFFER ?</p>
  
  
  <nav class="navbar-bottom">
    <div class="open-nav">
        <h3>DO AN OFFER</h3>
    </div>
    <div class="nav-content">
        <ul>
            <li>
                <a href="#">OFFER HIM</a>
            </li>
            <li>
                <a href="#">OFFER YOU</a>
            </li>
            <li>
                <a href="#">OFFER THEM</a>
            </li>
            <li>
                <a href="#">OFFER THAT</a>
            </li>
        </ul>
    </div>
  </nav>
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用toggleClass()切换隐藏的div和动画的transition

$('.open-nav').click(function() {
  $('.navbar-bottom').toggleClass("opened");
});

.container {
  width: 200px;
  border: 1px solid black;
  height: 100vh;
}

.open-nav {
  cursor: pointer;
}

.navbar-bottom {
  height: 158px;
  background-color: yellow;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: -112px;
  width: 200px;
  transition: all .5s;
}

.opened {
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <p>WHAT OFFER ?</p>


  <nav class="navbar-bottom">
    <div class="open-nav">
      <h3>DO AN OFFER</h3>
    </div>
    <div class="nav-content">
      <ul>
        <li>
          <a href="#">OFFER HIM</a>
        </li>
        <li>
          <a href="#">OFFER YOU</a>
        </li>
        <li>
          <a href="#">OFFER THEM</a>
        </li>
        <li>
          <a href="#">OFFER THAT</a>
        </li>
      </ul>
    </div>
  </nav>
  <div>