固定底部 slidetoggle 不返回到原始位置

Question

我正在为我网站右下角的这个固定联系表单创建一个滑动开关（向上和向下）。我能够让它向上滑动，但无法让它回到原来的起始位置。

我哪里错了？

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

Answer 1

这会起作用：

jsFiddle Demo

$(".footer .contactformbox .sectionbar").click(function () {
    $(".footer .contactformbox").slideToggle({
        direction: "up"
    }, 300).css("bottom", "0");
    return false;
});
$('.footer .contactformbox').click(function(){
    $(".footer .contactformbox").slideToggle({
        direction: "up"
    }, 300).css("bottom", "-328px");

});

A down-side 上面的是单击表单会将其最小化。我建议使用这种替代方法：

Revised jsFiddle Demo

HTML:

<div class="footer">
    <div class="contactformbox form-body">
        <div class="sectionbar">Contact Us</div>
        <div class="form"></div>
    </div>
</div>

js/jQuery:

var ff = $('.contactformbox .form');

$(".footer .contactformbox .sectionbar").click(function () {
  if( ff.hasClass("toggled") ) {
    $(ff).animate({"height": "0px"}).removeClass("toggled");
  } else {
    ff.animate({"height": "368px"}).addClass("toggled");
  }
});

注意必须点击标题栏(.sectionbar)才能关闭

Answer 2

除了为元素的 height 设置动画外，slideToggle() 还会更改元素的 display 属性。这是为了在切换关闭时隐藏元素并在切换打开时显示它。因此，在切换 parent 容器时让 header 栏可见可能很困难。

If the element is initially displayed, it will be hidden; if hidden, it will be shown.

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

在下面的演示中，框由一个 "head" 元素和一个 "body" 元素组成。 body 的高度设置为所需的高度，元素被隐藏 display:none。

切换时，body 的高度是动画的。

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>

Answer 3

尝试利用.animate()设置、重置选择器".footer .contactformbox"

的cssbottom属性

jQuery(document).ready(function() {
  var elem = jQuery(".footer .contactformbox")
  jQuery(".footer .contactformbox .sectionbar").click(function(e) {
    elem.animate({bottom: elem.css("bottom") === "-328px" ? "+=125" : "-328px"}
    , 200, "linear")
  });
});

.footer .contactformbox {
  background-color: #fff;
  border: 1px solid #000;
  bottom: -328px;
  height: 368px;
  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;
  bottom: 0px;
}

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

jsfiddle http://jsfiddle.net/0Lddfpsy/3/

固定底部 slidetoggle 不返回到原始位置

fixed bottom slidetoggle not returning to original position

html

css

jquery

slidetoggle