jquery - 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
 });
});

我现在拥有的：小提琴

任何帮助是极大的赞赏。谢谢你。

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/