同位素可点击元素:同一时间只能打开一个div

Question

对于一个公司的团队页面，我将使用Isotope，并按位置过滤。点击图片时，该人的电话号码、邮件等信息应该会变得可见。

这工作得很好，但现在我有疑问，我在一点上被卡住了。我怎么能一次只打开一个人的信息箱？

例如:我点击图片一，信息显示出来-然后当我点击图片二，人一应该关闭，这样只有人二的信息是打开的。同一时间只能有一个信息箱。

这是我到目前为止所拥有的完整代码。http://jsfiddle.net/qeMam/1/

下面是我的代码

// change size of clicked element
$container.find('.teamcontent').live('click', function() {
if ($(this).is('.large')) {
jQuery('.teaminfo', this).fadeToggle("fast", "linear");
$(this).toggleClass('large');
$container.isotope('reLayout');

} else {
jQuery('.large > .teaminfo'); 
$container.find('.large').removeClass('large');
jQuery('.teaminfo', this).fadeToggle("fast", "linear");
$(this).toggleClass('large');
$container.isotope('reLayout');
}
});

非常感谢。

Answer 1

每次你点击一个，你需要隐藏teaminfo，然后显示被点击的那个：

// change size of clicked element
    $container.find('.teamcontent').live('click', function() {
        if ($(this).is('.large')) {

            jQuery('.teaminfo', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');

        } else {
            //*********** added this line *************
            jQuery('.teaminfo').hide();
            jQuery('.large > .teaminfo');
            $container.find('.large').removeClass('large');
            jQuery('.teaminfo', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');
        }
    });

请参阅小提琴：http://jsfiddle.net/qeMam/2/