使用固定div使滑动切换底部和顶部向左或向右

HTML:

HTML：

I want to work this div in slideToggle logic. But it has two big problems:

我想在slideToggle逻辑中使用这个div。但它有两个大问题：

1- I don't know why but my fixed div already open when I open the website. Whereas, it must be close.

1-我不知道为什么，但是当我打开网站时，我的固定div已经打开了。然而，它必须是接近的。

2- When I click to header, it close. Ok. But if I try open or close my div twice, its not working.

2-当我点击标题时，它会关闭。好。但是，如果我尝试打开或关闭我的div两次，它不起作用。

How can I do it?

我该怎么做？

DEMO

DEMO

   $('#form .header').click(function() {
     $('#form').stop().animate({
       bottom: "0px"
     }, 500);
   }, function() {
     var height = $('#form').height() - 60;
     $('#form').stop().animate({
       bottom: -height
     }, 500);
   });

     #form {
       position: fixed;
       bottom: 0;
       right: 80px;
       width: 400px;
       height: 720px;
       z-index: 99999;
       background: red;
     }
     .header {
       background: gray;
       width: 399px;
       height: 74px;
       cursor: pointer;
     }

<div id="form" style="bottom: 0;
            right: 80px;
            width: 400px;
            height: 720px;">
  <div class="header"></div>
  <?php if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 17 ); } ?>
</div>

1 个解决方案

#1

Try utilizing top . Adjusted to -70px jsfiddle at jsfiddle http://jsfiddle.net/uWnjx/279/ so that .header would be slightly visible , able to be clicked

尝试利用top。在jsfiddle http://jsfiddle.net/uWnjx/279/调整为-70px jsfiddle，以便.header稍微可见，可以点击

$(function () {
    var form = $("#form");
    form.find(".header").on("click", function (e) {
        $("#form").animate({
            top: form.css("top") === "-70px" ? "80%" : "-70px"
        }, 500)
    });
});