Question

在我的布局中寻找一些帮助，我在页面加载时隐藏了多行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的问题？但我似乎无法确定它。

谢谢！

Answer 1

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

当我从

更改CSS时

 display: inline;
  float: left;

到

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

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

说实话，我不知道为什么会这样，但经过SO的深入探索之后，我拼凑了一个类似于其他地方类似的问题的解决方案。

任何能够教育其工作原理以及为什么我的原始CSS在最近的升级之前正常工作的人，您的意见将不胜感激！

嵌套div的不稳定的slidetoggle jquery行为

1 个答案: