带有嵌套 div 的不稳定的滑动切换 jquery 行为答案

【问题标题】：Erratic slidetoggle jquery behavior with nested divs带有嵌套 div 的不稳定的滑动切换 jquery 行为
【发布时间】：2015-10-25 10:13:03
【问题描述】：

在我的布局上寻找一些帮助，我在页面加载时隐藏了几行 div，在单击标题后会上下滑动。这是使用 jquery slidetoggle 完成的。

由于某种原因，只有一些滑动 div 可以顺利打开/关闭。其他人会突然打开并在关闭后留下一个占据隐藏 div 高度的空间。

我已经创建了一个显示这个的小提琴（至少在 Chrome 和 FF 中）：https://jsfiddle.net/6cLk2a9z/1/

我的 HTML 包含带有 class=trigger 的标题和带有 class=hidden 的隐藏 div。 trigger 标题上的点击事件会像这样滑动 div：

// slide trigger 
$(".hidden").hide();

$("div.trigger").click(function () {
    $(this).next(".hidden").slideToggle(250);
});

我有一些 CSS 可以像这样将 div 嵌套到块和列中：

.grayback {
    background-color: lightblue;

}
.yellback {
    background-color: lightyellow;
}
.greenback {
    background-color: lightgreen;
}
.trigger{
    background-color: gray;

}
.container {
  border-style: none;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 20px;
  color: white;
  background-color: #2F4D63;
  overflow: visible;
  display: inline;
  float: left;
  padding-bottom: 5px;
  padding-top: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  width: 100%;
} 

.content {
  font-family: Arial,Helvetica,sans-serif;
  color: black;
  display: inline;
  font-size: 12px;
  float: left;
  margin-right: 5px;
  min-height: 125px;
  min-width: 32%;
}

有人用 slideToggle 看到过这种效果吗？我试过改变我调用 slideToggle 方法的方式，但运气不好。我尝试了不同的 jQuery 版本，没有任何区别。出于某种原因，IE10+ 运行良好，但 FF 和 Chrome 都显示了不可靠的东西。也许这是我的 CSS 的问题？但我似乎无法确定它。

谢谢！

【问题讨论】：

标签： jquery html css slidetoggle

【解决方案1】：

我解决了这个问题 - 问题在于 .container 类上的 CSS 的显示方式。

当我从

更改 CSS

 display: inline;
  float: left;

到

 display: inline-block;
  vertical-algin: bottom;

在 FF 和 Chrome 中都解决了显示错误。

老实说，我不知道为什么会这样，但是在对 SO 进行了一些深入研究之后，我从其他地方类似的不可靠的 slideToggle 问题中拼凑了一个解决方案。

任何能够说明为什么这有效以及为什么我的原始 CSS 在最近升级之前一直可以正常工作的人，我们将不胜感激！

【讨论】：