jquery - 固定的底部滑盖无法返回原始位置

我正在网站右下角为此固定联系表单创建一个幻灯片切换（向上和向下）。我能够使其向上滑动，但无法使其切换回其原始起始位置。

我要去哪里错了？

jQuery(document).ready(function() {
  jQuery(".footer .contactformbox .sectionbar").click(function() {
    jQuery(".footer .contactformbox").slideToggle({
      direction: "up"
    }, 300).css("bottom", "0");
  });
});

.footer .contactformbox {
  background-color: #fff;
  border: 1px solid #000;
  bottom: -100px;
  height: 140px;
  width: 300px;
  position: fixed;
  display: block !important;
  right: 15px;
  z-index: 999999;
  border-radius: 6px 6px 0 0;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
}
.footer .contactformbox .sectionbar {
  background-color: #000;
  color: #fff;
  display: block;
  margin: 0 0 20px;
  padding: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
  <div class="contactformbox form-body">
    <div class="sectionbar">Contact Us</div>
  </div>
</div>

在JSFiddle上查看

最佳答案

除了动画元素的height之外，slideToggle()还会更改元素的display属性。打算在元素切换为关闭时隐藏它，并在元素切换为打开时显示它。结果，在切换其父容器的同时保持标题栏可见可能很困难。


  如果最初显示该元素，则它将被隐藏；如果隐藏，它将显示。


我建议为滑动框的内容创建一个单独的元素，作为标题栏的同级元素。这样，您可以隐藏内容框，同时保持其标题栏可见。

在下面的演示中，该框由一个“ head”元素和一个“ body”元素组成。身体的高度设置为所需的高度，并且元素用display:none隐藏。

切换时，将对身体的高度进行动画处理。

jQuery(function() {
  jQuery(".formbox-head").click(function() {
    jQuery(".formbox-body").slideToggle(300);
  });
});

.formbox {
  position: fixed;
  bottom: 0;
  right: 1em;
  width: 300px;
  font-size:14px;
}
.formbox-head {
  background-color: #000;
  color: #fff;
  padding: .5em 1em;
  border-radius: .5em .5em 0 0;
}
.formbox-body {
  background-color: #fff;
  border: 1px solid #000;
  height: 5em;
  padding: 1em;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formbox">
  <div class="formbox-head">Contact Us</div>
  <div class="formbox-body">Box content goes here.</div>
</div>

关于jquery - 固定的底部滑盖无法返回原始位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32342452/