Question

在这个jsfiddle中，我正在尝试创建一个在单击其标题时展开和折叠的DIV。标题位于顶部边框上，几乎类似于fieldform的图例标记。我想在盒子折叠时保留DIV的顶部边框。

如果你看看我的jsfiddle，你会发现它的功能非常好。但是，必须关闭我的容器盒边框才能达到此效果。结果，我的标题内容向左移动。它们移动了与外部DIV的左边界宽度相同的像素数量。

我已经尝试了一些方法来弥补这种转变，因为我希望文本保持在同一位置，而顶部边框也保持原来的位置，但到目前为止还没有运气。有没有人有任何想法？

Answer 1

这个让图例保持原样，但会切断左右边框：

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

试一试： forked fiddle

这个让图例保持在原位并且不会切割边框：

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

也可以尝试： forked fiddle

Answer 2

我认为如果你把文本放在#mdlFcstContent中的一个范围内。然后将span设置为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";

编辑：我注意到，这些也留下了一个底部边框，不确定这是否是一个交易破坏者。如果是，而不是删除边框，只需将颜色设置为透明

Answer 3

试试这个：

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

您必须向范围添加display:inline-block，因为margin属性不适用于非块元素

Answer 4

@insertusernamehere给出了一个很好的答案，但我找到了另一个解决方案，我想我也会发布： forked fiddle

我通过在折叠DIV时更改boxTitle DIV下SPAN左边框的宽度来解决问题。

编辑：在我看来，这是最实用的解决方案。它允许您轻松地将边框宽度从2像素更改为1像素，而不会出现问题。

当我切换另一个元素时，如何使我的跨度正确对齐？

4 个答案: