div元素没有增长

时间:2013-10-31 08:51:16

标签: javascript html css

我写了这个菜单,元素动态添加,但在添加元素之后,div不会增长。

CSS:

#frstMenu
{
    position:absolute;
    top:1.5%;
    right:1%;
    width:23%;
    height:70%;
    background:rgba(0,0,0,0.6);
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    padding-top:1%;
    overflow:hidden;
    z-index:2;
}

.menulist1{
    position:absolute;
    width:100%;
    height:15$;
    top:0%;
    right:0%;
    dispaly:none;
    text-decoration: none;
    color: #333;
    clear:both;
    border-bottom: 1px solid #e6e8ea;
    z-index:2;
}

#menulist
{
    position:absolute;
    top: 100%;
    right: 1%;
    width:23%;
    height:500%;
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    z-index:1;
 }

HTML:

> <div id="firstMenuList">
>         <div id="frstMenu">choose</div> 
>         <div id="menulist" class="menuList"></div> 
>         <div id="frstList1" class="menuList"></div> <- The child divs are similar this   </div>

使用Javascript:

function ccc( prnt , id , cls, r ) {


 var ar=new Array("hi","there","hello","world","adsad","asdsad","dsfsdfs","fdsfsdf","sfdsfsdf","soiqeqjek");

 var parent=document.getElementById(prnt);

 for (var i=0;i<ar.length;i++)
    {
    var node=document.createElement("div");

    node.setAttribute("id",id+""+i);
    node.setAttribute("class",cls);
    node.setAttribute("onclick","select('"+id+""+i+"')");
    node.style.top=(((i)*15)+2)+"%";
    node.style.right=r+"%";

    node.innerHTML=ar[i];
    parent.appendChild(node);
    }
    parent.style.display="none";
}

我该如何调用该函数:

 ccc("menulist","frstMenu","menulist1","0");

图片:
http://i.stack.imgur.com/BpMPX.jpg

1 个答案:

答案 0 :(得分:0)

使用position: absolute,您必须在循环中增加菜单(for) - 只需在添加每个元素时添加高度。

在不使用jQuery的情况下添加高度的代码在您的情况下应如下所示:

parent.style.width = parent.clientHeight + 20;

但它当然是例子,你必须将“20”值改为你自己的(计算)。