リサイズでdivsコンテンツの高さを取得する - バニラのjavascript

Question

コンテンツが異なる複数のdivがあります（ユーザー固有）。これらのdivは、10emの高さに折りたたまれています。その高さはヘッダーの高さと同じです。クリックすると、コンテンツ全体が展開されて表示されます。 "height：auto"のプレーンCSSマジックを使用できない理由は、スクロールの展開と折りたたみのアニメーションです。 Max-Heightとさまざまなソリューションは、私が望むやり方ではうまく動作しないので、javascriptを使って行う必要があります。

Javascriptを

//expand & collapse paper 
var paperHead = document.getElementsByClassName('paperHead'); 

for (var i = 0; i < paperHead.length; i++) { 
    paperHead[i].addEventListener('click', function() { 
     var selectedPaper = this.parentElement; 
     var sectionHeight = selectedPaper.scrollHeight; 
     var expanded = selectedPaper.getAttribute('expanded') === 'true'; 

     if (expanded) { 
      this.parentElement.style.height = '10em'; 
      this.parentElement.removeAttribute('expanded'); 
     } else { 
      selectedPaper.style.height = sectionHeight + 'px'; 
      selectedPaper.setAttribute('expanded', 'true'); 
     } 
    }); 

    *here is the resize code included* 

} 

すべてが正常に動作し、どのように私はそれを期待されています。しかし、このコードでは十分ではない場合があります。ユーザーがウィンドウのサイズを変更すると、高さはコンテンツにはもう収まりません。だから私はサイズ変更機能を追加しようとしたが、私は問題になってポイントを取得しないでください。

リサイズ-コード：

window.addEventListener('resize', function() { 
     var selectedPaper = document.querySelectorAll("[expanded='true']"); 

    for (var i = 0; i < selectedPaper.length; i++) { 
     var actualHeight = selectedPaper[i].scrollHeight; 

     selectedPaper[i].style.height = actualHeight + 'px'; 
    } 
}); 

このコードは、例の50％に適しています。私のウィンドウの幅を小さくすると、すべて問題ありません。展開されているdivは高さが増します。しかし、ウィンドウの幅を広げてdivの高さを下げると、反対方向は機能しません。そうではありません。

"scrollHeight"のように、コンテンツに必要な最小の高さを得ることができましたが、それはすでに必要としている余分なスペースは考慮されません。 私はoffsetHeight、innerHeight、outerHeightを試してみましたが、それらのどれも私のために働いていないので、コード自体に何か問題があると思います。

あらかじめ、バニラのjavascriptをお願いします。

Answer 1

さて、私は自分の質問のための答え...

を持って、それは非常に簡単です - それは、高さで行われています：自動遅延に。

//expand & collapse paper 
var paperHead = document.getElementsByClassName('paperHead'); 

for (var i = 0; i < paperHead.length; i++) { 
    paperHead[i].addEventListener('click', function() { 
     var selectedPaper = this.parentElement; 
     var sectionHeight = selectedPaper.scrollHeight; 
     var expanded = selectedPaper.getAttribute('expanded') === 'true'; 

     if (expanded) { 
      selectedPaper.style.height = sectionHeight + 'px'; 

      setTimeout(delay, 1); 

      function delay() { 
       selectedPaper.style.height = '10em'; 
       selectedPaper.removeAttribute('expanded'); 
      } 

     } else { 
      selectedPaper.style.height = sectionHeight + 'px'; 
      selectedPaper.setAttribute('expanded', 'true'); 

      setTimeout(delay1, 150); 

      function delay1() { 
       selectedPaper.style.height = 'auto'; 
      } 
     } 
    }); 
} 

paperHeaderをクリックすると、計算された高さが得られます。トランジションは150msを要し、この後（delay1,150）、高さは「auto」に設定されます。用紙が展開され、paperHeaderの2回目のクリックで折りたたまなければならない場合、高さは計算された高さに戻され、ちょうど1msの短い遅延で（アニメーションは機能しません）、高さは元に戻ります最初の10emに。