在頁邊距之間自動對齊div onclick

我正在嘗試創建一個帶有隱藏div的產品列表。當我點擊產品時，隱藏的div應該打開並顯示詳細信息。在頁邊距之間自動對齊div onclick

正如您從fiddle中看到的那樣，最後一個隱藏的div在點擊時會在邊距外打開。

jQuery來打開隱藏的div

function activateDropdown(entry_id) { 
    $(".box-dropdown").hide("slow"); 
    $("#box-dropdown-" + entry_id).show("slow"); 
}

有沒有一種方法來「對齊」，它尊重利潤率？（該網站是有求必應，所以降低了視綠色的div也可能是3或2 ...）

更新：

我想，當打開應該是4×4的方形隱患。它必須是其他3個div的地方。更新了fiddle。
隱藏的div必須從左到右打開，但顯然對於最後一個正方形，它必須是從右到左。

來源

2014-01-14 Mark

所以你想要的窗口中打開一個到'left'或'左到右'？ – NoobEditor

更新了這個問題，謝謝你的提問！ – Mark

working demo

2的變化，你需要做的：

第一個變化，設置從右到左的div開盤怎麼也得表現DOM明智的，如果它是一個固定的潛水，我會建議使用nth-child(4n)種屬性，用於

#box-dropdown-4{ 
    right:0; 
}

然後，把條件放在JS中，對於要從右向左打開的div s，再次如果它總是第4個div，則使用類似entry_id%4 == 0的東西來標識！

if (entry_id != 4) { 
     $("#box-dropdown-" + entry_id).show("slow"); 
    } else { 
     $("#box-dropdown-" + entry_id).show('slide', { 
      direction: 'right' /* decide slide direction, yeah, its that simple :) */ 
     }, 20000); 
    }

最小鬼注：米不是JS的人，所以動畫並不順利:)

來源

2014-01-14 10:39:50 NoobEditor

太棒了，很簡單！真的很感謝你！ – Mark

@Mark：很高興我可以幫助...歡迎！ :) – NoobEditor

只是使用CSS

#box .box-dropdown { 
      display: none; 
      width: 100%; 
      height: 100%; 
      background: #ffffff; 
      position: absolute; 
      z-index: 5; 

     }

DEMO

改變：

width:100%; 
height:100%;

來源

2014-01-14 09:55:02

謝謝你的回答。我錯過了我的問題中的一個規範，我希望打開時隱藏的方塊應該是4x4。它必須是其他地方3.檢查更新的演示：http://jsfiddle.net/IronFeast/K8E4p/1/ – Mark

看看這個演示http://jsfiddle.net/jM6g6/ –

@Mark：你檢查過了嗎？ it/ –

在頁邊距之間自動對齊div onclick

回答

相關問題