jQuery在关闭时更改切换顺序

Question

我希望重新定义我的切换功能。现在它可以很好地切换，但是，第一次切换会“打开”两个不同的部分——这很好。关闭它们时，我想同时关闭它们或至少先关闭列表。此外，如果单击列表之外的任何内容，我还想关闭两者。

$('#LoginButton').click(function(){
 $('.username').animate({
        width : 'toggle'
 }, 1000, 'swing',function(){ //Set new LoginButton width
    var newWidth = ($('.username').width()); //get new width
    $('#LoginButton').toggleClass('expanded'); //just for rounded corners
    $("#profilesettings").width(newWidth).toggle(300); //new list width animation
 });
});

我目前拥有的：Fiddle

非常感谢任何帮助。谢谢。

Answer 1

您使用的是animate方法的回调函数，hide方法应该在.username元素可见时调用，所以动画同时执行。

$('#LoginButton').click(function () {
    var $username = $('.username'),
        $profile = $('#profilesettings'),
        state = true;

    if ($username.is(':visible')) {
        $profile.hide(1000);
        state = false;
    }
    $username.animate({
        width: 'toggle'
    }, 1000, 'swing', function () {
        if (state) {
            var newWidth = $(this).width();
            $profile.width(newWidth).show(300);
        }
        $('#LoginButton').toggleClass('expanded');
    });
});

http://jsfiddle.net/wxXyM/