jquery - 单击时，向下滑动 div 并更改按钮图标

Question

我想在单击按钮时从页面顶部向下滑动一个 div - 并更改按钮上的图标。然后再次单击它时，我希望 div 向上滑动(离开页面)，然后将按钮图标更改回其原始状态。

我将 div 设置为 display:none，它可以很好地向下滑动并且按钮会更改图标，但是一旦滑入到位它就会消失!我怎样才能停止它并在再次点击时将其向上滑动？

这是我的尝试:

$('.menu-up').on('click', function(e) {
    $( ".icon-bar" ).slideDown( "slow", function() {
        // Animation complete.
    });

    $(this).toggleClass("menu-up menu-down")
    e.preventDefault();
});

Answer 1

使用 slideToggle 代替。

DEMO

$('.menu-up').on('click', function(e) {
    $( ".icon-bar" ).slideToggle( "slow", function() {
        // Animation complete.
    });
    $(this).toggleClass("menu-up menu-down")
    e.preventDefault();
});