divを最小限に抑え、divを含むdivを非表示にするにはどうすればよいですか？

Question

現在のところ、特定のトグルボタンをクリックするとdivを20pxに減らす関数でjQueryを使用しています。私はそのdivの中のすべてのdivも同様に隠すことを望みますが、私はできる限り再帰的な関数/ループに頼らざるをえません。現在、トグルボタンの種類は機能していますが、divを非表示にすると、すべての子要素（ある場合）が以前の場所に残ります。高さを20ピクセルにするだけで、すべてのdivを消すことはできますか？私が必要とする良い例は、ボード上にコメントチェーンを隠す（redditなど）ようにすることです。ありがとう。

確かに、コード：

function toggleComment(child) 
{ 
    if (child.innerHTML.includes("–")) 
    { 
     //Minimizing 
     child.innerHTML = "[+]"; 
     $(child).parent().addClass("minimized"); 
     hideChildren($(child).parent()); 
    } 
    else 
    { 
     //Maximizing 
     child.innerHTML = "[–]"; 
     $(child).parent().removeClass("minimized"); 
     showChildren($(child).parent()); 
    } 
} 

function hideChildren(parent) 
{ 
    for (var i = 0; i < parent.children().length; i++) 
    { 
     var child = parent.children().eq(i); 
     if (!child.hasClass('ignoreOnHide')) 
     { 
      parent.children().eq(i).hide(); 
     }    
     if (child.has("div")) 
     { 
      hideChildren(child); 
     } 
    } 
} 

function showChildren(parent) 
{ 
    for (var i = 0; i < parent.children().length; i++) 
    { 
     var child = parent.children().eq(i); 
     parent.children().eq(i).show(); 
    } 
} 

このコードは部分的に動作します。視覚的には意図したとおりに機能しますが、より複雑な問題になります。再帰関数とループを使用しないことをお勧めします。これは、やはり意図したとおりに正しく動作しないためです。正確な問題は説明が難しく、この質問には関係しません。 divを最小限に抑えてループを使わずに内容を完全に隠すために、この問題について別の方法がありますか&？その幅/高さの外側に位置する要素を非表示にするには、あなたの親のdivに

overflow: hidden;

を追加

Answer 1

してみてください。

Answer 2

divプロパティの内容がクリップされるように、CSSプロパティ 'overflow'を使用することができます。トランジションと遊ぶ

.my_div { overflow: hidden; } 

、あなたはまた、「不透明度」スタイルを使用してコンテンツを隠すことがあります。

.my_div > * { opacity: 1; transition: opacity 2s ease; } 
.my_div.reduced > * { opacity: 0; } 

これはスムーズにコンテンツをフェードインします。あなたのコンテナの子を非表示に

Answer 3

利用のjQuery：**好ましくは[**スタックスニペットに質問自体に**コードの助けを求める

$('div.container div').fadeOut();