js树形菜单

张哥编程

发布于 2024-12-19 10:44:14

4.2K0

第一步：HTML页面设计

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>树形菜单</title>
    <link rel="stylesheet" href="../css/tree.css" />
    <script src="../js/tree.js"></script>
  </head>
  <body>
    <!--<span class="test" style="background-image: url('../img/plus.jpg');">   <!--1.设计网页布局-->
    <ul id="outerul">
      <li>名站导航
        <ul>
          <li><a href="#">毕丽巴</a></li>
          <li><a href="#">旅游吧</a>
            <ul>
              <li>丽江</li>
              <li>杭州</li>
              <li>呼伦贝尔</li>
            </ul>
          </li>
          <li><a href="#">狗粑粑</a></li>
          <li><a href="#">驴妈妈</a></li>
        </ul>
      </li>
      <li>常用软件
        <ul>
          <li>流氓软件</li>
          <li>网络安全</li>
          <li>理财软件</li>
          <li>天猫多多</li>
        </ul>
      </li>
      <li>热门游戏
        <ul>
          <li>王者农药</li>
          <li>绝地求死</li>
          <li>大话东游</li>
          <li>狗熊联盟</li>
        </ul>
      </li>
      <li>美女娱乐
        <ul>
          <li>赵丽英</li>
          <li>林枝玲</li>
          <li>范冰桶</li>
          <li>安气辣</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

第二步：CSS样式设计

body{font-size: 12px;line-height: 20px;}
#outerul{
  text-align: left;
  margin:0px;
  padding: 0;cursor: pointer;
}
#outerurl ul lia{
  text-decoration: none;color:black;
}
#outerul li{
  margin:-2px 0 0 -20px;
  padding: 0;
  list-style: none;
}
#outerul .plus{
  float:left;
  width:32px;height: 15px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border:1px solid #FF0000;
}
#outerul .sub{
  float: left;width:18px;
  height: 15px;
  background-position: 0 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
/*.test{display: block;background-repeat: no-repeat;}*/

第三部：JS设计

/*树形菜单：冒泡排序*/
var menu,subMenus,menuIcon;

function init(){
  menuArray=document.getElementById('outerul').getElementsByTagName('li');
  for(var i=0;i<menuArray.length;i++){
    subMenus=menuArray[i].getElementsByTagName('ul');

    if(subMenus.length>0){
      menuIcon=document.createElement('span');
      menuIcon.className='plus';
      menuIcon.style.backgroundImage='url(../img/plus.jpg)';

      menuIcon.onclick=function(){
        showHide(this.parentNode);
      }
      menuArray[i].insertBefore(menuIcon,menuArray[i].firstChild);
      subMenus[0].style.display='none';
    }else{
      menuIcon=document.createElement('span');
      menuIcon.className='sub';
      menuIcon.style.backgroundImage='url(../img/2.jpg)';
      menuArray[i].insertBefore(menuIcon,menuArray[i].firstChild);
    }//end if
  }
}
/*隐藏方法*/
function showHide(parentNode){
  var ul=parentNode.getElementsByTagName('ul')[0];
  ul.style.display=(ul.style.display=='none')?'block':'none';
  var span=parentNode.getElementsByTagName('span')[0];
  span.style.backgroundImage=(ul.style.display=='none')?'url(../img/plus.jpg':'url(../img/sub.jpg)';
}
window.onload=init;

效果如下：