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;
}

也试试看：forked fiddle

于 2012-07-18T21:15:43.413 回答
1

我想如果你把文本放在#mdlFcstContent 中。然后将跨度设置为显示：无；而不是按照您的方式进行操作，您的问题将得到解决

<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 给出了一个很好的答案，但我发现了另一个我想我也会发布的解决方案： forked fiddle

当 DIV 折叠时，我通过更改 boxTitle DIV 下 SPAN 的左边框宽度解决了这个问题。

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

于 2012-07-19T13:50:15.743 回答