slideToggle with floating items

Question

不是最好的标题，但我不知道如何用几句话来描述我的问题。我有六个浮动项目，每个项目都有描述。我使用slideToggle隐藏并显示每个项目的说明。问题是描述div比它对应的项目（30％）更宽（100％），我需要在六个项目之间显示这个描述（连续有3个）。现在，每次我显示一个描述浮动项目......好吧，不再浮动因为更广泛的div。

我尝试在描述div上使用position: absolute;，但其余的浮动项目覆盖了描述。

它有很多代码（主要是文字）所以我制作了fiddle here。这可能不是获得我想要的结果的最佳解决方案，因此任何有关如何解决或重新编码的想法都会有所帮助。

如果我的解释或小提琴不够清晰，我还有一个设计截图，我试图编码：

Answer 1

我更新了你的小提琴：http://jsfiddle.net/Sd29U/

您的问题发生了，因为您在每个人container-text后面放了container-services dev。

我先连续放三个按钮，然后是三个相应的文本 JavaScript会检查按下哪个按钮并相应地处理 （HTML，JavaScript和CSS都已更改）

---

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

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

我删除了activeButton - var，并检查了active-class。

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