单击，滑动div并更改按钮图标

Question

我想在点击按钮时从页面顶部向下滑动div，并且还要更改按钮上的图标。然后再次单击它，我希望div向上滑动（离开页面）然后将按钮图标更改回原始状态。

我将div设置为Forms!YourFormName!SubcontrolName!lblTest.Visible，它会向下滑动，按钮会更改图标，但只要它滑入到位，它就会消失！如何阻止它并在再次点击时将其滑动？

这是我的尝试：

display:none

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

Answer 2

尝试将高度设置为0而不是display：none。

Answer 3

只是做了一个小提琴。检查一下，我使用slideToggle而不是slideDown进行点击。

$( ".icon-bar" ).slideToggle( "slow", function() {
    // Animation complete.
});

https://jsfiddle.net/okbndfeL/