Onclick擴展的div行爲很奇怪

我想要做一個像this one這樣的投資組合頁面。
我正在使用砌石jquery插件。
所以，當我點擊一個盒子時，它應該展開並推動其他盒子，而不是躺在它們下面。
所以基本上，點擊我添加一個新的寬度和高度的框，我點擊，並在框中顯示另一div。Onclick擴展的div行爲很奇怪

如果我添加了height和width內嵌的div推動其他框像它應該，但是當我使用jQuery，它只是擴展了他們腳下。 Here is a fiddle.

HTML：

<div class="container"> 
    <div class="box" id="1" onmouseover="$(this).addClass('hover');" onmouseout="$(this).removeClass('hover');"> 
     <div class="close-btn" id="cb_1"></div> 
     <div class="box-content" id="bc_1"> 
      <img src="image.png" /> 
      <span class="title">Titlul clipului aici 1</span> 
     </div> 
     <div class="big-box-content" id="bbc_1"> 
      <h1 class="title">Titlul clipului aici 1</h1> 

      <img src="image.png" /> 
      <p>Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese.</p> 
     </div> 
    </div> 

    <div class="box" id="2" onmouseover="$(this).addClass('hover');" onmouseout="$(this).removeClass('hover');"> 
     <div class="close-btn" id="cb_2"></div> 
     <div class="box-content" id="bc_2"> 
      <img src="image.png" /> 
      <span class="title">Titlul clipului aici 2</span> 
     </div> 
     <div class="big-box-content" id="bbc_2"> 
      <h1 class="title">Titlul clipului aici 2</h1> 

      <img src="image.png" /> 
      <p>Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese.</p> 
     </div> 

    </div> 
    ..... 
    ..... 
</div>

的jQuery：

$('.box').click(function() { 
    id = this.id; 
    //if there is any box opened, close it 
    $('.close-btn').css('display', 'none'); 
    $('.box-content').css('display', 'block'); 
    $('.big-box-content').css('display', 'none'); 
    $('.box').css('width', '200px').css('height', 'auto').css('padding', '10px'); 
    // open the clicked one 
    $('#' + id).css('width', '650px').css('height', 'auto').css('padding', '15px'); 
    $('#bc_' + id).css('display', 'none'); 
    $('#bbc_' + id).css('display', 'block'); 
    $('#cb_' + id).css('display', 'block'); 
});

來源

2012-12-21 musicvicious

你需要使用磚石的重載功能，所以它會知道新的大小。 – Chanckjh

似乎邏輯。我會盡力做到這一點，如果我找到如何:) – musicvicious

謝謝你！修改尺寸後，我重新運行砌體腳本，它的工作原理！如果您發佈答案，我會接受它，謝謝！ – musicvicious

使用磚石的裝載功能。

$(function(){ 

    $('.container').masonry('reload'); 

});

的jsfiddle：http://jsfiddle.net/WA347/45/

來源

2012-12-21 09:32:52 Chanckjh

我不是很熟悉的磚石，但現在看來，這增加了position:absolute;的元素。我建議你嘗試使用position:relative;。

也就是說，此行更改：

$('.container').masonry({ columnWidth:230 });

這一行：

$('.container').masonry({ columnWidth:230, position:relative });

檢查他們的文檔的這一部分：masonry: containerStyle

來源

2012-12-21 09:25:43

用這行代碼masonry插件不起作用，但是盒子在展開時推動其他盒子（如預期的那樣） – musicvicious

Onclick擴展的div行爲很奇怪

回答

相關問題