div複数レベルのドロップダウンでの縮尺

Question

私は、ドロップダウンメニューでdivコンテナを拡大縮小しようとしています。

<div class='dropdown'> 
    <button class ="dropbtn"><b>Hover!</b></button> 
    <div class='dropdown-content'> 
     <div class='dropdown-level2'> 
      <button class ="dropbtn-level2"><b>"..."</b></button> 
      <div class='dropdown-content-level2'> 
       <a>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</a> 
      </div> 
     </div> 
    </div> 
</div> 

参照：もちろんhttp://codepen.io/anon/pen/BLvxwY

私はちょうどしかし、コンテンツが動的に生成され、最小幅を設定することができます。したがって、最小幅よりも短いテキストが発生する可能性があります。

どうすればdivをスケールすることができますか？

ありがとうございました

Answer 1

あなたはJsを使用してテキストの長さを数えます。

その後、コンテナの幅をIf, Else if and Elseと変更します。

ITSは次のようになります。

$(document).ready(function(){ 

    $('.dropdown-content-level2 > a').each(function(){ 

    //count your text length 
    var textLength = $(this).html().length; 

    //if it less from 100 characters 
    if (textLength < 100) { 

     $(this).css('width', '100px') 

    } else { 

     $(this).css('width', '200px') 

    } 

    }) 

}) 

そして、あなたがより多くの状況がある場合：

$(document).ready(function(){ 

    $('.dropdown-content-level2 > a').each(function(){ 

    var textLength = $(this).html().length; 

    if (textLength < 100) { 

     $(this).css('width', '100px') 

    } else if (textLength > 100 && textLength < 200) { 

     $(this).css('width', '200px') 

    } else { 

     $(this).css('width', '300px') 

    } 

    }) 

}) 

の作業CodePen