Question

我正在尝试创建一个带有隐藏div的产品列表。当我点击产品时，隐藏的div应该打开并显示详细信息。

正如您在fiddle中看到的那样，最后隐藏的div在点击时会在边距外打开。

jQuery打开隐藏的div

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

有没有办法“对齐”它尊重利润？（该网站是响应式的，因此减少视口绿色div也可能是3或2 ......）

更新

我希望打开时隐藏的方格应为4x4。它必须是其他3个div的地方。更新了fiddle。
隐藏的div必须从左到右打开，但显然最后一个方格必须是从右到左。

Answer 1

只需使用此css

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

        }

DEMO

改变了：

width:100%;
height:100%;

Answer 2

working demo

您需要做的2项更改：

首次更改，设置div从右向左打开的方式必须是DOM方式，如果它是固定潜水，我会建议使用nth-child(4n)类型的属性

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

然后，在JS中为将要从右到左打开的div放置一个条件，如果它总是第4个div，则使用类似{{1}的内容识别！

entry_id%4 == 0

大多数人注意：我不是JS人，所以动画不顺畅：）

在页边距之间自动对齐div onclick

2 个答案: