7

確かに、私はCSSがまったく得意ではありません。似たような質問や例があることは知っていますが、何度も試してみましたが、私の例ではうまくいきませんでした。どうぞよろしくお願いいたします。

このフィドルを見てください：http://jsfiddle.net/4h75G/2/

下部のテーブルの "Data1,1" セルにカーソルを合わせると、セルの内容全体が表示されるように自動的に展開されます。ただし、ホバーで展開するのではなく、1回クリックしてセルを展開し、2回クリックして元の状態に収縮/折りたたむことができるようにしたいと考えています。これを CSS のみで行い、Javascript を使用しないようにしたいと考えています。

ありがとう！

HTML:

        <table>

    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>

    <tr>
    <td>Data1,1</td>
    <td>Data2,1</td>
    <td>Data3,1</td>
    </tr>

    <tr>
    <td>Data1,2</td>
    <td>Data2,2</td>
    <td>Data3,2</td>
    </tr>

    <tr>
    <td>Data1,3</td>
    <td>Data2,3</td>
    <td>Data3,3</td>
    </tr>

    </table>
    </br>
    <table>

    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>

    <tr>
    <td><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
    <br/>Data1,1 second line - this is a kind-of long line too
    <br/>Data1,1 third line
    <br/>Data1,1 fourth line</span>
    </div>
    </td>
    <td>Data2,1</td>
    <td>Data3,1</td>
    </tr>

    <tr>
    <td>Data1,2</td>
    <td>Data2,2</td>
    <td>Data3,2</td>
    </tr>

    <tr>
    <td>Data1,3</td>
    <td>Data2,3</td>
    <td>Data3,3</td>
    </tr>

    </table>

CSS:

    body,table{
        font-family:verdana,arial,sans-serif;
        font-size:12px;
        border-collapse:collapse;
    }

    td,th{
        padding:3px 3px;
        margin:0px;
        border:1px solid #BBB;
        white-space:nowrap;
    }

    .content{
        height:15px;
        width:100px;
        overflow:hidden;
        text-overflow:ellipsis
    }

    .content:hover{
        height:auto;
        width:auto;
    }
4

4 に答える 4

11

状態を保持できる非表示の css 要素 (チェックボックスなど) をいじることで、スクリプトを使用せずにそのようなことを実現することもできますが、スクリプトでクラスを切り替えるだけでこれを行う方がはるかに優れていると思います。

.contentラベルでラップする場合は、チェックボックスを先頭に追加して、次のように非表示にします。

input[type='checkbox'] { visibility: hidden; position: absolute; }
input[type='checkbox']:checked + .content { height: auto; width: auto;}

あなたはあなたが望むものを達成することができますが、それはとても醜いです. あなたの例に適用されたこの疑わしい慣行の例については、http://jsfiddle.net/4h75G/13/を参照してください。

于 2013-10-17T20:33:17.293 に答える
-2

私はあなたが望むものへのより様式化されたアプローチを探していましたが、TD タグのより遅い移行の開始と終了を探していました。これは、JS と HTML を使用して実現されました。

緑の列をクリックすると開き、赤の列をクリックすると閉じます。クリック可能な列には、JS 関数呼び出しが表示されます。

私のJSFiddleの例...

HTML

<table cellpadding='0' cellspacing='0' style='width: 500px;'>
    <tr>
        <td colspan='3' style="background: #ddd; ">top content</td>
    </tr>
    <tr>
        <td style="background: #fcc;  vertical-align: top;" 
             onclick="reducer('as', 10, 50);">col1</td>
        <td id='as' style="background: #cfc; vertical-align: top;" 
             onclick="expander(this.id, 500, 50);">col2</td>
        <td style="background: #ccf; width:200px;">col3</td>
    </tr>
    <tr>
        <td colspan='3' style="background: #ddd; ">bottom content</td>
    </tr>
</table>

JS

function expander(id, maxheight, time) {
    var slice = document.getElementById(id);
    var height = Number(slice.style.height.replace('px', ''));
    var expandRate = maxheight / time;
    var i = 0;

    var timer = setInterval(function () {
        height = height + expandRate;

        if (i < time) {
            i++;
            slice.style.height = height + 'px';
        } else {
            clearInterval(timer);
        }
    }, 1);
}

function reducer(id, minHeight, time) {
    var slice = document.getElementById(id);
    var height = Number(slice.style.height.replace('px', ''));
    var collapseRate = Math.abs(height - minHeight) / time;
    var i = 0;

    var timer = setInterval(function () {
        height = height - collapseRate;

        if (i < time) {
            i++;
            slice.style.height = height + 'px';
        } else {
            clearInterval(timer);
        }
    }, 1);
}
于 2015-06-15T03:38:58.480 に答える