如何填充div以适应屏幕点击它并覆盖其他div

Question

我有一组具有相同类名的<div>标签。我的目标是当我点击特定<div>时，我需要最大化其高度和宽度以填充屏幕并覆盖剩余的<div>个。我使用以下代码来实现此目的

$('div').click(function(){
    var isFullscreen = false;
    var d = {};
    var speed = 900; 
    if(!isFullscreen){ // MAXIMIZATION
        d.width = $(window).width();;
        d.height = $(window).height();; 
        isFullscreen = true;
    }
    else{ // MINIMIZATION            
        d.width = "300px";
        d.height = "100px";            
        isFullscreen = false;
    }
    i = 0 
    id = $(this).attr("id");
    while(i<=12){
        if(i != id){
            $("i").hide();
        }
        i++;
    }
    $(this).animate(d,speed)
    })

所以我所做的是我从 1到12 的顺序给每个 id 并试图隐藏它们，除了点击的那个。这是正确的方法吗？为我糟糕的英语道歉。额外信息：我正在使用Jquery Masonry，流畅的布局。

Answer 1

你在寻找这样的东西：

http://jsfiddle.net/Ns5hD/