單擊后，在jQuery上反轉動畫（顯示/隱藏）

Question

我正在嘗試使用：

$(document).ready(function() {
    $('#showmenu1').click(function() {
            $('.menu1').slideDown("slow");
    });
});

單擊觸發器時，jQuery中的效果使div出現，這非常成功。 但是，當再次單擊相同的觸發器時，我希望動畫反轉以使div消失。 我想做的效果是：

$(document).ready(function() {
    $('#showmenu1').click(function() {
            $('.menu1').slideUp("slow");
    });
});

任何幫助將不勝感激。

HTML示例：

<section id="showmenu1" style="background-color:#09F; color:#fff">
    <h1>Show Div</h1>
</section>
<div class="menu1" style="display: none; background-color:#09F; color:#fff; padding:0; margin:0">
    <ul style="padding:0px; margin:0px; position: relative; text-align: center;">
        <li>
            <h1 style="margin-top:0">Hello Div</h1>
            <p style="margin-top:0">Div is shown</p>
        </li>
    </ul>
</div>

干杯

Answer 1

$('#showmenu1').click(function() {
        $('.menu1').slideToggle("slow");
});

演示： http : //jsfiddle.net/wL71w8td/

Answer 2

ToggleSimply改為使用slideToggle：

$(document).ready(function() {
    $('#showmenu1').click(function() {
            $('.menu1').slideToggle("slow");
    });
});

Answer 3

嘗試這個：

$("div").click(function() {
  $(this).hide("slide", {
    direction: "down"
  }, 1000);
});