上面的 SlideDown 表单固定 header 不向上滑动

Question

我正在尝试在固定 header 上方放置一个下拉表单。我可以让 div 向下滑动，但我无法让它向上滑动。

这是我的fiddle...http://jsfiddle.net/amesy/w83dwwpL/

我已经改编了 fiddle 形式的代码，可以在这里找到 http://jsfiddle.net/darcyclarke/JNRpK/28/light/

如您所见，原始 fiddle 没有使用相同的按钮关闭 div 元素。

未使用下面代码中的宽度动画。

$(document).ready(function () {

var open = 0;
$( ".contact a" ).addClass( "open" );


    $(".contact a.close").bind("click", function(e){

        $("#contactContainer").animate({"height":"0px"}, 1000);    

        $( ".contact a" ).removeClass( "close" );
        $( ".contact a" ).addClass( "open" );

        open = 0;
    });


    $(".contact a.open").bind("click", function(e){

        $("#contactContainer").animateAuto("height", 1000); 

        $( ".contact a" ).removeClass( "open" );
        $( ".contact a" ).addClass( "close" );

        open = 1;
    });


jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height, width;
return this.each(function(i, el){
    el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
    height = elem.css("height"),
    width = elem.css("width"),
    elem.remove();

    if(prop === "height")
        el.animate({"height":height}, speed, callback);
    else if(prop === "width")
        el.animate({"width":width}, speed, callback);  
    else if(prop === "both")
        el.animate({"width":width,"height":height}, speed, callback);
});  
}

});

Answer 1

你可以简单地使用切换来完成。（你不需要使用打开和关闭class）

使用下面的代码。

$("#contactContainer").animate({"height":"toggle"}, 1000);

Check Out updated JSFiddle

上面的 SlideDown 表单固定 header 不向上滑动

SlideDown form above fixed header not sliding back up

jquery

slidedown

slidetoggle