Question

我正在尝试创建一个扩展菜单，将父div添加多个400px较小的div，直到填充完整的父div。

在for循环中，我检查.background是否与.main-nav的高度相同，如果不是，则继续添加.slice div。

我遇到的问题是，一旦.background与.main-nav的高度相同，它就会停止添加.slices divs，这意味着不会覆盖整个宽度。

P.S First'real'JS项目;对不起，如果我的代码很乱。

以下JSFiddle将更有意义：

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做这项工作。目前尚不清楚是否要添加＆＃34;切片＆＃34;垂直或水平。我横向选择但你应该没有困难。

根据子高度/宽度填充父div

1 个答案: