0

会社のチームページには、Isotope を使用し、位置によるフィルタリングを行います。画像をクリックすると、その人の電話番号、メールなどの情報が表示されます。

それはかなりうまくいきますが、今私は疑問に思っており、ある時点で立ち往生しています。一度に 1 人のインフォボックスだけを開くにはどうすればよいですか?

例: 写真 1 をクリックすると、情報が表示されます。次に、写真 2 をクリックすると、人物 1 が閉じて、人物 2 の情報のみが表示されます。同時に 1 つのインフォボックスのみ。

これが私がこれまでに持っているもの、完全なコードです。 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 に答える