jquery - 在仅显示一个 div 时切换多个 div，可能是 jquery 手风琴？

Question

当前，当用户单击链接时，会$('#user');滑出。当用户单击另一个（不是相同的链接）$('.more-info-arrow').find('a')链接时，前一个用户的信息会消失，但不会随着第二个请求重新出现。$('#user');我希望只有在可见 的情况下才这样做。

http://jsfiddle.net/QSapW/

=======================Jquery====================

            //User detail information
        $('.more-info-arrow').find('a').live('click', function () {
            var $this = $(this);
            var user = $('#user');
            var userInfo = $('#user-info');

            // If display is none, that means it is hidden
            if (user.css('display') == 'none') {
                $this.addClass('active');
                user.hide().animate({
                    width: 'toggle'
                }, 400, function () {
                    userInfo.fadeIn('fast');
                });
            }

            // Second Click
            else {
                $this.removeClass('active');
                userInfo.fadeOut('fast', function () {
                    user.animate({
                        width: 'toggle'
                    }, 400);
                });
            }
        });

Answer 1

如果您使用的是 HTML5，则可以利用新data属性。

在这里演示：http: //jsfiddle.net/QSapW/4/

HTML

<div class="item-info clearfix" data-userId="1">
    <div class="more-info-arrow"><a title="" href="javascript:;">&gt;&gt;</a></div>
</div>
<div class="item-info clearfix" data-userId="2">
    <div class="more-info-arrow"><a title="" href="javascript:;">&gt;&gt;</a></div>
</div>

<div class="user" id="user-box-1">
    <div class="user-info">
        <p>hello world</p>
    </div>
</div>
<div class="user" id="user-box-2">
    <div class="user-info">
        <p>good-bye world</p>
    </div>
</div>​

JS

//User detail information
$('.more-info-arrow').on('click', 'a', function () {
    var $this    = $(this),
        $item    = $this.parents('.item-info'),
        userId   = $item.data('userid'),
        user     = $('#user-box-' + userId),
        userInfo = $('.user-info', user);

    // If display is none, that means it is hidden
    if (user.is(':visible') === false) {
        $this.addClass('active');
        user.animate({
            width: 'toggle'
        }, 400, function () {
            userInfo.fadeIn('fast');
        });
    }

    // Second Click
    else {
        $this.removeClass('active');
        userInfo.fadeOut('fast', function () {
            user.animate({
                width: 'toggle'
            }, 400);
        });
    }
});​

CSS

.user {
    display:none;
    width:100px;
    height:100px;
    background:red;
}