0

对于公司的团队页面，我将使用 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');
}
});

非常感谢。

4

1 回答 1

2

每次点击一个，需要先隐藏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/

于 2012-12-18T10:04:09.010 回答