Jquery体点击停止切换

时间:2013-03-19 18:04:41

标签: jquery click toggle

我有一个需要在点击按钮时上/下动画的div,如果它已被动画下来(或打开),它必须在单击主体时关闭。这工作正常但是如果我使用正文关闭它,切换按钮在第一次单击时不再起作用。我希望有一个简单的解决方法,非常感谢任何帮助,谢谢!

$('#button').toggle(function(event){
        event.preventDefault();
        $('#box').animate({top: '0'}, 300);
    },function(event){  
        event.preventDefault();    
        $('#box').animate({top: '-100px'}, 300);
    });

    $("body").click(function(event) {
        if ($(event.target).closest('#box').length === 0) {
            $('#box').animate({top: '-100px'}, 300);
        }
    });

http://jsfiddle.net/user1688604/ve7VA/1/

1 个答案:

答案 0 :(得分:1)

不推荐使用

toggle事件方法,您可以使用click方法。使用click和条件语句可以解决问题。

$('#button').click(function (event) {
    event.preventDefault();
    var $box = $('#box'),
        val = $box.css('top') === '0px' ? '-100px' : '0px';
    $box.stop().animate({
        top: val
    }, 300);
});

http://jsfiddle.net/Wdjys/