Jquery 滑动切换浮动项

不是最好的标题，但我不知道如何用几句话来描述我的问题。我有六个浮动项目，每个项目都有描述。我正在使用

slideToggle

隐藏和显示每个项目的描述。问题是描述

div

比它对应的项目（30%）宽（100%），我需要在六个项目之间显示此描述（一行有三个）。现在，每次我显示描述时，浮动项都是。。。好吧，因为更宽的div，不再浮动

我尝试使用

位置：绝对，但其余的浮动项覆盖了描述

它有很多代码（大部分是文本），所以我做了一个测试。这可能不是获得我想要的结果的最佳解决方案，因此任何关于如何解决或重新编码这一问题的想法都会很有帮助

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

我更新了你的小提琴：

出现问题的原因是您将
容器文本
放在每个
容器服务开发人员
之后

我先把三个按钮排成一行，然后是三个相应的文本。

JavaScript检查按下了哪个按钮并进行相应处理。

（HTML、JavaScript和CSS都已更改）




编辑：

所有的
容器服务
现在都以“default”类开始，当您单击该类时，它会切换为“active”。

在CSS中，我创建了两个子类，每个子类都有自己的背景色和边框色。当然，您可以更改这些规则并添加您喜欢的任何样式规则

我删除了
activeButton
-var，改为检查活动类

唯一可能的缺点是，您必须填写以下行：

$（'.container services'）.removeClass（'active'）.addClass（'default'），它检查活动类的每个
容器服务
-元素。
如果将活动按钮的类名存储在
activeButton
-var中，则只需将该元素的活动类更改回“default”。

您不会注意到这一点，但严格来说，现在需要执行更多的代码，这当然不太理想。
谢谢您的回答和解释。请您进一步解释一下用于标识“活动”按钮的jQuery，好吗？我想自定义按钮，使其处于活动状态（可能最好使用classToggle）。我编辑了我的答案（不知道你是否收到电子邮件或其他相关信息），谢谢你的帮助，我没有看到编辑的答案，我只收到新评论和回复的通知。啊，很高兴知道。哦，顺便说一句，我在所有按钮的HTML中添加了一个
onmousedown=“return false”
，因此您无法在这些元素上选择文本（但在智能手机和平板电脑等触摸平台上不起作用）