根據孩子的身高/寬度填寫父div

Question

我試圖創建一個擴展菜單，將父div與多個400px較小的div一起添加，直到完整的父div被填充。

在for循環中，我正在檢查.background是否與.main-nav高度相同，如果不是，則繼續添加.slice div。

我遇到的問題是，一旦.background與.main-nav高度相同，它將停止添加.slices divs，這意味着不會覆蓋全寬。

P.S第一個'real'JS項目;對不起，如果我的代碼是混亂的。

以下的jsfiddle會更有意義：

http://jsfiddle.net/8ryAD/13/

JS：

(function() { 
    'use strict'; 

    var s = document.getElementsByClassName('slice'); 
    var m = document.getElementById('btn-nav'); 
    var b = document.getElementsByClassName('background')[0]; 
    var a = document.getElementById('main-nav'); 

    var w = document.documentElement.clientHeight; 

    m.addEventListener('click', function() { 

     m.classList.add('open'); 

      for(var i = b.clientHeight; i < a.clientHeight; i++) { 

     var c = document.getElementsByClassName('slice')[0]; 
     var d = c.cloneNode(true); 

     if(b.clientHeight == a.clientHeight) { 
      break; 
      } else { 
      c.parentNode.appendChild(d); 
      } 
     } 

     for(var i = 0; i < s.length; i++){ 
        s[i].style.opacity = 1; 
       } 

    }, false); 

}()); 

HTML

<div id="master"> 

    <a id="btn-nav"> 
     <span></span> 
     <span>Menu</span> 
     <span></span> 
    </a> 

    <nav id="main-nav"> 

      <div class="background" > 

       <div class="slice"></div> 

      </div> 

    </nav> 

</div><!-- end master --> 

Answer 1

代碼中的主要問題是for循環。對於這種特殊情況，你應該使用while循環。 For循環用於確切知道要做的迭代次數。

我返工循環是這樣的：

// Loop while we don't cover client surface 
while(dsWidth < a.clientWidth*(a.clientHeight/c.clientHeight)) { 
    var d = c.cloneNode(true); 
    c.parentNode.appendChild(d); 
    dsWidth = dsWidth + d.clientWidth; 
} 

這裏是一個fiddle做的工作。目前還不清楚是否要垂直或水平添加「切片」。我選擇水平，但你應該沒有困難。