javascript - 无法在 div 中获取菜单，该菜单在单击时被下拉

Question

我想要创建的是一个菜单，它使用 Jquery 从页面顶部下降。使用以下代码，这一切都很好。

<div id="menu">
    <div id="menucontentwrapper">
        <div id="menucontent"></div>
    </div>
    <div id="menutabwrapper">
        <div id="menutab">MENU</div>
    </div>
</div>
<script>
$('#menutab').click(function() {
$('#menu').animate({
top: '+=200',
}, 1000, function() {
// Animation complete.
});
})
</script>

因此，单击“菜单选项卡” div 时，整个事情都归结为我想要的位置，但是当人们再次单击“菜单选项卡”时，我希望它恢复原状，而我尝试的任何方法似乎都不起作用.

我希望有人可以帮助我。

提前致谢！

Answer 1

试试这个：

$('#menutab').click(function() {
    $('#menutab').hide();
    $('#menu').animate({
        top: '0px'
    }, 1000, function() {
        // Animation complete.
        });
});


$('#menu').mouseleave(function () {
    if($(this).css("top")=='0px') {
        $(this).animate({
            top: '-200px'
        }, 1000, function() {
            $('#menutab').show();
        });
    }
});