jquery - Jquery 菜单不起作用？按钮单击向下滑动

Question

$('btn').click(function() {
    $('Menu').slideDown();
    }, function() {
        $('btn').click(function(){
          $('Menu').slideUp();
});

});

我想要实现的是，当单击 btn 时，slideDown 菜单。当再次点击关闭！

Answer 1

首先，您似乎没有正确选择btnandMenu元素。您需要指定它们是类还是 ID。

例如，使用$('.btn')or $('#btn')。必须为Menu.

为了简化您的代码，请尝试使用slideToggle().

$('btn').click(function() {
   $('Menu').slideToggle('slow');
});

演示

更新

只是为了好玩，如果您希望在评论请求时同时使用slideUp和slideDown事件，您可以使用以下.is(':visible')功能实现此目的：

$('#btn').click(function() {
    if ($('#menu').is(":visible")) {
        $('#menu').slideUp('slow');
    }
    else {
        $('#menu').slideDown('slow');
    }  
});

演示

Answer 2

它们是什么btn，Menu它们是 id 还是 classes？还是其他？

通过切换显示/隐藏元素有slideToggle方法。

参考：

.slideToggle() 方法为匹配元素的高度设置动画。这会导致页面的下部向上或向下滑动，似乎显示或隐藏项目。如果元素最初被显示，它将被隐藏；如果隐藏，它将显示。根据需要保存和恢复显示属性。如果一个元素的显示值为 inline，然后被隐藏并显示，它将再次被显示为 inline。当隐藏动画后高度达到 0 时，显示样式属性设置为 none，以确保元素不再影响页面的布局。

持续时间以毫秒为单位；较高的值表示较慢的动画，而不是较快的动画。可以提供字符串 'fast' 和 'slow' 分别表示 200 和 600 毫秒的持续时间。

代码：

$('.btn').click(function() {
    $('#menu').slideToggle('slow');
});

演示：http: //jsfiddle.net/IrvinDominin/HHvjC/