javascript - 尝试使 div 从页面顶部向下和向上滑动使用 - 顶部定位和点击时的 jquery 动画

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);
     });
});

updated jsFiddle

编辑

此时维护边框只是样式，您可以添加一个容器 div 来保存您的信息选项卡，然后只给它一个顶部边框。这是一个 further updated jsFiddle .