刘钢的博客 – 我是UED

今天得到产品经理的一个需求
分类体系 一级分类 以及其子分类 在一个标题栏上展示 只显示5个子分类 其余显示为下拉列表 效果如下图

由于对前端比较痴迷 于是乎用前端来实现了一下 之前这样的需求 都是程序员去做判断 来实现的
查看DEMO
下载代码
已在如下浏览器测试 IE6 IE7 IE8 FF3.5.6 Opera10 Safari4
页面结构用前端实现如下

<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<listli.length;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;
}

其他的更多的是页面样式的问题 不做过多解释了

查看DEMO
下载代码
转载请注明：转自我是UED-原文链接:http://www.iamued.com/qianduan/1010.html