javascript树形导航菜单实例代码

树形菜单在网页中有着广泛的应用，因为它能够很好的组织起主次分类关系，同时也节省了网页的空间，当然是先此种效果的方式有多重多样，下面是用原生javascript实现的此效果，希望能够对需要的朋友有所帮助。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>js实现的树形菜单-51前端</title>
<style type="text/css">
.expand{
  cursor:pointer;
}
.hide{
  cursor:pointer;
}
</style>
<script type="text/javascript"> 
function toggleChild(o){ 
  var cls=o.getAttribute("class"); 
  if(cls == "expand"){ 
    var sb=o.nextSibling; 
    if(window.innerWidth) sb=sb.nextSibling; 
    while(sb!= null&&sb.tagName.toLowerCase()=='dd'){ 
      sb.style.display="none"; 
      sb=sb.nextSibling; 
      if(window.innerWidth) sb = sb.nextSibling; 
    } 
    o.removeAttribute("class"); 
    o.setAttribute("class", "hide"); 
    if(window.innerWidth) //ff 
    o.textContent = "田" + o.textContent.substring(1); 
    else 
    o.innerText = "田" + o.innerText.substring(1); 
  } 
  else{ 
    var sb = o.nextSibling; 
    if(window.innerWidth) sb = sb.nextSibling; 
    while (sb != null && sb.tagName.toLowerCase() == 'dd'){ 
      sb.style.display = ""; 
      sb = sb.nextSibling; 
      if(window.innerWidth) sb = sb.nextSibling; 
    } 
    o.removeAttribute("class"); 
    o.setAttribute("class", "expand"); 
    if(window.innerWidth) //ff 
    o.textContent = "曰" + o.textContent.substring(1); 
    else 
    o.innerText = "曰" + o.innerText.substring(1); 
  } 
} 
function maketree(obj){ 
  var dts=obj.getElementsByTagName('dt'); 
  var bro=navigator.userAgent; 
  for(var i=0;i<dts.length;i++){ 
    if(bro.indexOf("MSIE 6.0")>0|| bro.indexOf("MSIE 7.0")>0){
      dts[i].setAttribute("className", "expand");
    }
    else{
      dts[i].setAttribute("class","expand"); 
    }
    if(window.innerWidth)
      dts[i].textContent="曰"+dts[i].textContent; 
    else 
      dts[i].innerText="曰"+dts[i].innerText; 
    dts[i].onclick=function(){toggleChild(this);}; 
  } 
} 
window.onload=function(){ 
  maketree(document.getElementById("tree")); 
}; 
</script>
</head>
<body>
<h3>定义列表也能变成一棵树：</h3>
<dl id="tree">
  <dt>菜单一</dt>
  <dd>1.1 div教程</dd>
  <dd>1.2 css教程</dd>
  <dd>1.3 ccc</dd>
  <dt>菜单二</dt>
  <dd>2.1 jQuery教程</dd>
  <dd>javascript教程</dd>
  <dt>菜单三</dt>
  <dd>
    <dl style="margin-top:2px; margin-bottom:2px;">
      <dt>3.1</dt>
      <dd>51前端一</dd>
      <dd>51前端二</dd>
      <dt>3.2</dt>
      <dd>51前端三</dd>
      <dd>51前端四</dd>
    </dl>
  </dd>
</dl>
</body>
</html>

代码描述：javascript导航菜单。javascript树形导航菜单实例代码

下载全部收藏

146 194

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册