切换多个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;
}