jQuery 向上滑动面板

Question

我有一个包含响应轮播的面板，所以我需要保留容器的高度，这意味着我无法使用

display:none

所以我保留了高度并将其放置在视线之外的顶部，当用户单击按钮时它会向下滑动。

我只需要让用户再次点击按钮并让它向上滑动。

这是我的资料：

$('a.myCourses').on('click', function() {
  $('#courseCart').animate({'top': '0'}, 1000);
  $(this).addClass('open');
});

这会将面板向下滑动。我添加了一个 class 以为我可以再次定位按钮并让它向上滑动但是那没有用。

感谢您的帮助。

Answer 1

你应该包括一个开关来检查你的轮播是否已经打开，然后你可以再次向上滑动它。在这见她fiddlehttp://jsfiddle.net/gbzhhc5d/3/

$('a.myCourses').on('click', function() {
if($(this).hasClass('open')) {
    $('#courseCart').animate({'top': '-100'}, 1000);
    $(this).removeClass('open');
}
else {
    $('#courseCart').animate({'top': '0'}, 1000);
    $(this).addClass('open');
}

});

jQuery 向上滑动面板

jQuery slide panel back up

jquery

jquery-animate