jQueryのトグルとクリックイベントの切り替えは、トグル後に奇妙なバウンスで要素を切り替える

Question

jQueryとJavaScriptを初めて使用しています。 特定の要素をクリックすると、要素のリストがトグルダウンするはずです。それはトグルダウンしますが、問題はバウンスをトグルダウンした後です。

<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> 

私は、クリックイベントが原因でDOMのバブルが発生し、複数回トリガされる可能性があると読んでいます。だから私はe.stopPropagation();行を追加してみましたが、成功しませんでした。

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

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

「.items」の余白を設定した後、バウンスが消えてしまった。誰か私になぜ奇妙な行動があるのか​​説明できますか？
}）;

JSBIN link

Answer 1

トグルイベントが<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の実行を停止できます（ DevToolsに焦点を当てたF8）。その後、[要素]タブに移動し、要素のスタイルを表示できます。