2

このjsfiddleでは、タイトルをクリックすると展開および折りたたむDIVを作成しようとしています。タイトルは、フィールドフォームの凡例タグのように、上部の境界線に配置されます。ボックスが折りたたまれたときに、DIVの上部の境界線を残したいのですが。

私のjsfiddleをチェックすると、かなりうまく機能していることがわかります。ただし、この効果を得るには、コンテナボックスの境界線をオフにする必要があります。その結果、私のタイトルの内容が左にシフトします。それらは、外側のDIVの左の境界線の幅と同じ量のピクセルをシフトしています。

上部の境界線も元の位置にある間、テキストを同じ位置に残したいので、シフトを補うためにいくつかのことを試みましたが、今のところ運がありません。誰かアイデアはありますか？

4

4 に答える 4

2

これにより、凡例はそのままになりますが、左側と右側の境界線がカットされます。

.boxContainerHidden {
    padding-left:        0px;
    border:              2px solid transparent;
    border-top-width:    0px;
}

試してみてください：フォークフィドル

これにより、凡例はその位置に留まり、境界線はカットされません。

.boxContainerHidden {
   height:           1px;
   border:           solid #ffffff;
   border-width:     2px;
   border-top-width: 0px;
   border-bottom:    0px;
}

それも試してみてください：フォークフィドル

于 2012-07-18T21:15:43.413 に答える
1

スパンの#mdlFcstContent内にテキストを配置すると思います。次に、スパンをdisplay：noneに設定します。あなたがそれをしているようにそれをする代わりに、あなたの問題は解決されます

<div id='mdlFcstContent'>
    <span id='mdlFcstContent_span'>
            Lorem ipsum dolor sit amet consectetuer venenatis vitae Nulla fringilla consequat. Wisi magnis volutpat auctor Nulla Vivamus id In elit dictumst mollis. Curabitur auctor consectetuer dui interdum neque Curabitur vel auctor tellus netus. Sed tincidunt condimentum semper Vestibulum sed tellus ridiculus elit In dictum. Turpis lacus pellentesque In ac volutpat mi non nibh vitae laoreet. Elit.
    </span>
</div>

次に、これをトグル関数に入れます

 var elem = document.getElementById('mdlFcstContent_span');
 elem.style.display = "none";

編集：私は気づきました、これらは下の境界線も残します、これがあなたにとって取引ブレーカーであるかどうかはわかりません。そうである場合は、境界線を削除する代わりに、色を透明に設定するだけです

于 2012-07-18T21:13:53.260 に答える
1

これを試してください：

http://jsfiddle.net/EekzW/3/

プロパティは非ブロック要素では機能しないdisplay:inline-blockため、スパンに追加する必要がありますmargin

于 2012-07-18T21:23:20.820 に答える
0

@insertusernamehereは素晴らしい答えを出しましたが、私も投稿すると思った別の解決策を見つけました： フォークフィドル

DIVが折りたたまれているときにboxTitleDIVの下のSPANの左ボーダーの幅を変更することで問題を解決しました。

編集：これは私の意見では最も実用的な解決策です。境界線の幅を2ピクセルから1ピクセルに問題なく簡単に変更できます。

于 2012-07-19T13:50:15.743 に答える