嘗試使用 - 頂部定位和jquery動畫在點擊時使div向下和向上滑動

Question

基本上當用戶點擊.selector元素時，div .dropDown應向上滑動-100px，當它們再次單擊時，它應向下滑動到頂部：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"})

    })
}

});

邏輯：如果dropDown div的頂部位置為零，則意味着div是打開的（可見）。 當用戶單擊按鈕隱藏dropDown div時，div將轉到-100px（隱藏）。 然后，如果用戶想再次看到div，他們點擊按鈕，然后div返回到頂部：0。

當頂部處於-100px時我遇到問題，當我點擊按鈕時，下拉列表不會向下滑動。 請幫忙。 謝謝。

當我設置jsfiddle時，我意識到我到目前為止在FF中工作但在chrome中沒有。 這對我來說很奇怪，如果你能幫助我解決這個問題也會很棒。

Answer 1

您可以通過布置展開時應顯示的div來實現此目的，並設置display:none ，但將可單擊的選項卡作為子元素輸出，以便始終可見。 然后你可以使用slideToggle簡化你的javascript。 300值僅指定您希望它滑動的速度。

例：

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

更新了jsFiddle

編輯

此時維護邊框只是樣式，您可以添加一個包含“信息”選項卡的容器div，並將其設置為頂部邊框。 這是一個進一步更新的jsFiddle 。