jQuery切换和单击事件上的slidetoggle切换后，元素具有怪异的弹跳

Question

我是jQuery和JavaScript的新手。 我设置了要display: none的元素列表display: none单击某个元素时，元素列表应向下切换。 它向下切换，但是问题是在向下切换后它会反弹。

<div class="category">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
     <h1 class="categoryHeading">Transportation</h1>
    <div class="items">
      <p class="item">MVV</p>
      <p class="item">Bike</p>
    </div>
  </div>

我在stackoverflow上读到，这可能是因为click事件使DOM冒泡并多次触发。 因此，我尝试通过添加e.stopPropagation();行e.stopPropagation();进行尝试e.stopPropagation(); 但没有成功。

$(".categoryHeading").click(function(e){
            e.stopPropagation();

      $(".items").toggle(1000);

在为“ .items”设置边距后，弹跳消失了。 谁能解释我为什么会有奇怪的行为？
}）;

JSBIN 链接

Answer 1

toggle事件将一些样式行放入<div class="items"> 。 即，以下内容：

display: block;
overflow: hidden;
height: 75.9189px; // this value goes up/down
padding: 0px;
margin: 0px;
width: 330.892px;
opacity: 0.89527; // this value goes up/down

动画之后，只有一个属性仍然可用： display: block;

如果您添加了overflow: hidden ，凹凸将消失。 因此，添加overflow: hidden到.items {} 。

---

但是，问题是由<p>元素的一部分padding引起的。 如果属性overflow:hidden; 设置在父级上，则不使用子级（ <p> ）周围的边距（因为隐藏了父级的溢出）。 这就是原因，它跳了起来。

---

这是我发现JavaScript动画过程中为元素设置的属性的方式（在注释中要求）：

动画是用JavaScript制作的。 由于增加动画的持续时间非常容易，因此我将该值更改为5000。然后，在Chrome的开发人员工具中，您可以转到“源”标签并停止执行JavaScript（“暂停”图标正确或仅F8（着重于DevTools）。 之后，您可以转到元素选项卡并查看元素及其样式。