javascript - 动态扩展隐藏溢出的元素

Question

我有一个带有 的元素overflow: hidden，我想在单击时展开它。

这就是我到目前为止所拥有的。

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

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

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

Answer 1

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

我所做的只是在您的下拉 Div 上设置 position:absolute ，然后在其他 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;\
        ";
};

在这里演示

显然，出于演示原因添加 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;\
        ";

};