Javascript 使用隐藏溢出动态扩展元素

我有一个

overflow:hidden

元素，我希望在单击时展开它

这就是我目前所拥有的

它确实扩展了元素，但并不像预期的那样。它不应将图元推到其下方，而应重叠并隐藏它。我可以使用

position:absolute

部分实现这一点，但这会使下一个元素折叠到顶部

这只能通过在单击的元素上使用CSS来实现吗？不应调整其他元素。

---

或者，如果是，则应使用JavaScript自动计算。

将元素放置在彼此的顶部需要绝对定位。您可以在第一个元素上放置一些

填充顶部

，以补偿重叠的位置。

以下是您可能需要的示例：

我所做的只是在下拉式Div上设置位置：绝对，然后在顶部给其他Div中的第一个添加填充，以补偿绝对定位造成的空间损失：

首先，您可以稍微更改第二个div以添加一个类：

<div class="a" onclick="z(this)">click here click here click here click here click here</div>
<div class="second">1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>

---

要扩展的div将具有绝对定位，然后第二个div将具有足够的填充以弥补第一个div。

另一种解决方案还可能涉及将div包装在容器中，如下所示：

HTML:

JS:

显然，出于表示的原因添加HTML元素并不理想，但我认为它比JavaScript更好

---

在IE7+、Chrome和Firefox中测试，我正在使用这个解决方案，它会自动为下一个元素添加填充

HTML

JavaScript

function z (a) {

    // nextElementSibling equivalent
    var b = a.nextSibling;
    while (b && b.nodeType != 1)
        b = b.nextSibling;

    if (b)
        b.style.cssText = b.style.paddingTop ? "" : "padding-top: " + a.clientHeight + "px";

    a.style.cssText = a.style.border ? "" : "\
        background: #fff;\
        border: 1px solid #ccc;\
        height: auto;\
        margin-left: -5px;\
        margin-top: -5px;\
        padding: 4px;\
        position: absolute;\
        ";

};

---

CSS不支持单击事件。你仍然需要使用JavaScript。是的，这就是我的意思。可以使用JavaScript动态调整其他元素的CSS。我可以自己添加填充，但如果涉及多个单击的元素，这会很快变得复杂（当元素上的CSS在某个点发生更改时更是如此）。您需要的填充应该略大于绝对定位框的高度，您可以从中获取$（）.height（），然后设置$（）.CSS（'height'，'…'））相同的值。在IE8中会发生什么？这是一个z索引问题吗？它显然不支持类型的第n个选择器。啊，你可以让第一个额外的div有一个类名，只需将类型（2）的第n个div更改为任何类名。更改了上面的代码。这似乎是本页上最简单的解决方案它工作得很好，但是添加了HTML，正如您所提到的。我选择了另一个解决方案，它只是稍微扩展了已经使用的JavaScript函数。

<div class="container">
    <div class="a" onclick="z(this)">
        click here click here click here click here click here
    </div>
</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>

body { margin: 10px; }

div { font-family: sans-serif; font-size: 16px; line-height: 20px; margin-bottom: 10px; width: 150px; word-break: break-all; }

div.a { color: tomato; cursor: pointer; height: 20px; overflow: hidden; }
.container { height: 20px; overflow: visible; }

function z (a) {
    a.style.cssText = a.style.border ? "" : "\
        background: #fff;\
        border: 1px solid #ccc;\
        height: auto;\
        margin-left: -5px;\
        margin-top: -5px;\
        padding: 4px;\
        position: absolute;\
        ";
};

<div class="a" onclick="z(this)">click here click here click here</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div class="a" onclick="z(this)">click here click here click here</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div class="a" onclick="z(this)">click here click here click here</div>

div {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 20px;
    width: 150px;
    word-break: break-all;
}

div.a {
    color: tomato;
    cursor: pointer;
    height: 20px;
    overflow: hidden;
}

function z (a) {

    // nextElementSibling equivalent
    var b = a.nextSibling;
    while (b && b.nodeType != 1)
        b = b.nextSibling;

    if (b)
        b.style.cssText = b.style.paddingTop ? "" : "padding-top: " + a.clientHeight + "px";

    a.style.cssText = a.style.border ? "" : "\
        background: #fff;\
        border: 1px solid #ccc;\
        height: auto;\
        margin-left: -5px;\
        margin-top: -5px;\
        padding: 4px;\
        position: absolute;\
        ";

};