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

Question

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

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

然后，当我再次单击标题时，它会以动画方式返回到其初始位置。

我成功地只使用 jQuery 完成了第一部分，没有动画。如果您对完整 CSS 有任何建议，我也很感兴趣。

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

.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;
}

<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>

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>