Question

我有一个overflow: hidden元素，点击后我想展开。

这是我到目前为止所做的。

http://jsfiddle.net/up6bW/2/

它确实扩展了元素，但并不像它应该的那样。它不应该将元素推到它下面，而是重叠并隐藏它。我可以使用position: absolute部分地完成这项工作，但这会使下一个元素崩溃到顶部。

这可以通过仅在点击的元素上使用CSS来完成吗？其他因素不应调整或者如果是，则应使用JavaScript自动计算。

Answer 1

以下是您可能需要的示例： http://jsfiddle.net/up6bW/39/

我所做的就是在你的下拉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>

然后将CSS更改为以下内容：

body {
    margin: 10px;
}

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

div.a {
    cursor: pointer;
    color: tomato;
    height: 20px;
    overflow: hidden;
    position:absolute;
}
.second{
    padding:25px 0px 0px 0px;       
}

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

Answer 2

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

HTML：

<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>

CSS：

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; }

JS：

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;\
        ";
};

DEMO HERE

显然，出于表现原因添加HTML元素并不理想，但我认为它比JavaScript替代方案更好。

在IE7 +，Chrome和Firefox中测试

Answer 3

将元素置于彼此之上需要绝对定位。您可以在第一个元素上放置一些padding-top来补偿重叠的位置。

Answer 4

我正在使用此解决方案，它会自动将填充添加到下一个元素。

http://jsfiddle.net/up6bW/47/

HTML

<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>

CSS

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;
}

的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;\
        ";

};

动态扩展隐藏溢出的元素

4 个答案: