1

overflow: hiddenをクリックすると展開したいの要素があります。

これは私がこれまでに持っているものです。

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

要素を展開しますが、想定どおりではありません。要素をその下に押し込むのではなく、重ねて非表示にする必要があります。を使用して部分的にこれを機能させることができますposition: absoluteが、これにより次の要素が上に折りたたまれます。

これは、クリックされた要素に CSS を使用するだけで実行できますか? 他の要素は調整しないでください。
または、そうである場合、JavaScript を使用して自動的に計算する必要があります。

4

4 に答える 4

1

必要なものの例を次に示します：http： //jsfiddle.net/up6bW/39/

私がしたのは、位置を作成することだけでした：ドロップダウンDivで絶対位置を設定し、次に他のdivの最初の位置を上にパディングして、絶対位置からのスペースの損失を補います。

まず、2番目の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には絶対位置があり、2番目のdivには最初のdivを補うのに十分なパディングがあります。

于 2012-12-11T22:49:15.420 に答える
1

別の解決策として、次のように 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 でテスト済み

于 2012-12-11T23:11:35.430 に答える
0

要素を互いの上に配置するには、絶対配置が必要です。padding-topオーバーラップの位置を補正するために、最初の要素にいくつか置くことができます。

于 2012-12-11T22:37:46.397 に答える
0

次の要素にパディングを自動的に追加するこのソリューションを使用しています。

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

};
于 2012-12-12T02:30:10.470 に答える