javascript - 打开在移动视图期间切换页脚向上的标签（未添加 css 框架）

Question

我在没有任何 CSS 框架的情况下制作了自己的响应式页脚，但在移动视图上它变成了切换。问题是当我切换按钮时，它会向下切换，而不是向上切换。谢谢你。

如果我如何处理向上切换，请检查代码片段。

如果你们认为有更合适和更好的方法来制作良好的响应式页脚，我们将不胜感激。

但在这种情况下，我只是错过了一些东西。谢谢

$(document).ready(function() {
  $(".footer-toggle-btn").click(function() {

    if ($(this).text() == "☰") {
      $(this).text("✖");
      $('.footer-container').css('display', 'block');

    } else {
      $(this).text("☰");
      $('.footer-container').css('display', 'block');

    }
    $("#footer li").toggle("slow");
  });
});

.footer-container {
  max-width: 1200px;
  width: 90%;
  padding: 0px 5%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.footer-container li {
  list-style-type: none;
}

.footer-container a {
  text-decoration: none;
  color: white;
}

.footer-container ul {
  width: 65%;
  display: block;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav {
  width: 100vw;
}

.footer-toggle-btn {
  display: none;
  background-color: black;
  color: white;
  padding: 5px 0px;
  height: auto;
  width: 50px;
  font-size: 23px;
  border: 3px solid black;
  cursor: pointer;
}

.footer-toggle-btn:hover {
  background-color: black;
  color: #f39700;
}

@media only screen and (max-width: 700px) {
  #footer {
    height: auto !important;
  }
  .footer-container {
    display: block;
    flex-direction: column;
    width: 100%;
    padding: 0;
  }
  .footer-container ul {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .footer-container a {
    display: block;
    padding-left: 15px;
  }
  .footer-container li {
    margin: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
  .footer-container li:hover {
    background-color: #f39700;
  }
  .footer-container li:hover a {
    color: black;
    font-weight: bold;
  }
  .footer-toggle-btn {
    display: block;
  }
}

#footer {
  background-color: black;
  height: 100px;
  display: flex;
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="footer">
  <footer class="footer-container">
    <ul class="feed-list">
      <li><a href="#">TEST 1</a></li>
      <li><a href="#">TEST 2</a></li>
      <li><a href="#">TEST 3</a></li>
      <li><a href="#">TEST 4</a></li>
      <li><a href="#">TEST 5</a></li>
      <button class="footer-toggle-btn">✖&lt;/button>
    </ul>
  </footer>
</section>

标签： javascripthtmljquerycss