用JS控制显示子菜单个数 自动下拉
页面结构用前端实现如下
代码:
<div class="Area">
<div id="menu1" class="main_tit">
<h2><a href="http://www.iamued.com">IamUed.com-前端开发</a></h2>
<ul class="sublist">
<li><a href="http://www.iamued.com">javascript</a></li>
<li><a href="http://www.iamued.com">Ria</a></li>
<li><a href="http://www.iamued.com">ActionScript</a></li>
<li><a href="http://www.iamued.com">Flash</a></li>
<li><a href="http://www.iamued.com">FLex</a></li>
<li><a href="http://www.iamued.com">W3C</a></li>
<li><a href="http://www.iamued.com">xhtml</a></li>
</ul>
</div>
一级内具体内容
</div>
可以看到 对于程序输出来讲 这样的结构不需要任何逻辑 相对代码结构清晰整洁
核心JS代码如下
复制内容到剪贴板代码:
//核心方法 传送一个数组参数
function submenumore(menuarr)
{
for(var j=0;j<menuarr.length;j++)//循环该数组
{
var listli=document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].getElementsByTagName("li");//根据数组获取到该子菜单的li
if(listli.length > 5)//如果子菜单数量大于5
{
var newimg=document.createElement("a");//新建一个a元素 作为大于5个之后显示的小图标容器
newimg.className="moreimg";//给a元素设置一个样式
newimg.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释
{
showsubmore(this);
}
newimg.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释
{
hidesubmore(this);
}
var newul=document.createElement("ul");//新建一个Ul元素 用来存档多余的子菜单
newul.className="sublistmore";//给新的UL设置样式
for(var i=5;i
{
newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里
i--;
}
newul.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释
{
this.style.display="block"
}
newul.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释
{
this.style.display="none"
}
var imgli=document.createElement("li");//新建一个li元素
imgli.appendChild(newimg);//将之前建立的A元素 添加到这里 为了页面结构统一 可以比较好的调整样式
document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].insertBefore(imgli,null);//将新建的LI插入到5个子菜单后面
document.getElementById(menuarr[j]).appendChild(newul);//将多余子菜单加入到数组所传的容器内
}
}
}
这里要解释一个地方
复制内容到剪贴板代码:
for(var i=5;i<listli.length;i++)
{
newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里
i--;
}
这里为什么要i–呢
由于读取出来的是一个引用对象
所以将之前数组内对象 添加到新的 对象里
之前的数组length将-1
所以将i–以获得之前数组的连贯对象
在代码中用到了2个之前收集的方法 主要是为了兼容各种浏览器
复制内容到剪贴板代码:
//该函数主要取得对象距离浏览器的真实距离Offset
function GetRealOffset(o)
{
var elem = o;
var leftOffset = elem.offsetLeft;
var topOffset = elem.offsetTop;
var parent = elem.offsetParent;
while(parent)
{
leftOffset += parent.offsetLeft;
topOffset += parent.offsetTop;
parent = parent.offsetParent;
}
var Offsets = new Object();
Offsets.top = topOffset;
Offsets.left = leftOffset;
return Offsets;
}
//该函数主要用于取得元素的兄弟节点 由于火狐下兄弟节点将TextNode也计算在内 所以用该函数兼容
function getnextSibling(o)
{
do
{
o = o.nextSibling;
}
while (o.nodeType != 1)
return o;
}
其他的更多的是页面样式的问题 不做过多解释了
QQ：2693987339(点击联系)购买教程光盘
:
