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）。 之后，您可以轉到元素選項卡並查看元素及其樣式。