尝试使用 - 顶部定位和jquery动画在点击时使div向下和向上滑动

Question

basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.

$(document).ready(function(){
    var orig = $(".dropDown").outerHeight(); // 104
    var top = $(".dropDown").css("top");
if(top == "0px"){
    $(".selector").on("click", function(e){
        $(".dropDown").animate({top : "-100px"}, 400, 
            function(){
var top = $(".dropDown").css("top");
alert(top);                 
        })
    })
}
// else{
//  $(".selector").on("click", function(e){
//      $(".dropDown").animate({top : "0px"}, 400);
//      $("body").css({"background-color" : "green"})
//  })
// }
if($(".dropDown").css("top") == "-100px"){
    $(".selector").on("click", function(e){
        $(".dropDown").animate({top : "0px"}, 400);
        $("body").css({"background-color" : "green"})

    })
}

});

logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.

Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.

while I was setting up the jsfiddle I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.

Answer 1

You can achieve this by laying out your div as it should appear while expanded, and set display:none , but take the clickable tab out as a child element so that it is always visible. Then you can simplify your javascript quite a bit by using slideToggle . The 300 value just specifies how fast you want it to slide.

Example:

$(document).ready(function(){
     $('.selector').click(function () {
         $('.dropDown').slideToggle(300);
     });
});

updated jsFiddle

Edit

Maintaining the border at this point is just styling, you can add a container div that holds your Information tab, and just give that a top-border. Here is a further updated jsFiddle .