Question

对于公司的Team-Page，我将使用Isotope按位置过滤。点击图像后，该人的电话号码，邮件等信息应该可见。

这很好用，但现在我有问题，我被困在一点。我怎样才能一次只打开一个人的信息框？

例如：我点击图片一，Infos出现 - 然后当我点击图片二时，一个人应该关闭，这样只有二人的信息是开放的。只有一个信息框同时出现。

这是我到目前为止的完整代码。 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/

同位素可点击元素：同时只打开一个div

1 个答案: