jquery - 带有 float 元素的 slideToggle

Question

不是最好的标题，但我不知道如何用几句话来描述我的问题。我有六个 float 元素，每个元素都有一个描述。我正在使用 slideToggle 来隐藏和显示每个元素的描述。问题是描述 div 比它对应的元素 (30%) 更宽 (100%)，我需要在六个元素之间显示此描述(连续 3 个)。现在，每次我显示一个描述时， float 元素都是......好吧，由于更宽的 div 而不再 float 。

我尝试在描述 div 上使用 position: absolute;，但随后其余的 float 元素覆盖了描述。

它有很多代码(主要是文本)所以我做了一个 fiddle here .这可能不是获得我想要的结果的最佳解决方案，因此任何关于如何解决或重新编码的想法都会有所帮助。

如果我的解释或 fiddle 不够清楚，我还有我正在尝试编码的设计的屏幕截图:

Answer 1

我更新了你的 fiddle :http://jsfiddle.net/Sd29U/

您的问题发生是因为您将 container-text 放在每个单独的 container-services dev 之后。

我先把三个按钮排成一排，然后是三个对应的文字。
JavaScript 检查哪个按钮被按下并进行相应处理。
(HTML、JavaScript 和 CSS 全部更改)

---

编辑:http://jsfiddle.net/n5LjJ/

所有 container-services 现在都以“default”类开始，当您单击它时，它会切换为“active”。
在 CSS 中，我创建了两个子类，每个子类都有自己的背景颜色和边框颜色。您当然可以更改它们并添加您喜欢的任何样式规则。

我删除了 activeButton-var，并改为检查事件类。

唯一可能的缺点是，您必须输入以下行:
$('.container-services').removeClass('active').addClass('default');，检查每个 container-services 元素的事件-类(class)。 如果您将事件按钮的类名存储在 activeButton-var 中，您只需将该元素的事件类更改回“默认”。
你不会注意到它，但严格来说，现在需要执行更多代码，这当然不是最优的..