树形菜单Demo[超详细注释]

最新推荐文章于 2023-07-11 22:33:58 发布

Shaw Jie�

最新推荐文章于 2023-07-11 22:33:58 发布

阅读量163

点赞数 1

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/Shaw_Jie/article/details/126955771

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>树形菜单Demo</title>
    <style type="text/css">
      body {
        font-size: 13px;
        line-height: 20px;
      }

      #outerul {
        text-align: left;
        margin: 30px;
        padding: 0px;

        cursor: pointer;
      }

      #outerul ul a {
        text-decoration: none;
        color: black;
      }

      #outerul li {
        margin: -4px 0 0 -30px;
        padding: 0px;

        list-style-type: none;
      }

      #outerul .symbolsPlus {
        float: left;
        width: 32px;
        height: 15px;
        background-position: 0 50%;
        background-repeat: no-repeat;
      }

      #outerul .symbolsSub {
        float: left;
        width: 18px;
        height: 15px;
        background-position: 0 50%;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <ul id="outerul">
      <li>
        名站导航
        <ul>
          <li>
            <a href="#">百度贴吧</a>
            <ul>
              <li>旅游吧</li>
              <li>古典音乐吧</li>
              <li>摄影吧</li>
              <li>出国留学吧</li>
            </ul>
          </li>
          <li><a href="#">新浪微博</a></li>
          <li><a href="#">腾讯空间</a></li>
          <li><a href="#">网易邮箱</a></li>
          <li><a href="#">淘宝商城</a></li>
        </ul>
      </li>
      <li>
        常用软件
        <ul>
          <li><a href="#">杀毒软件</a></li>
          <li><a href="#">聊天工具</a></li>
          <li><a href="#">网页浏览</a></li>
        </ul>
      </li>
      <li>
        热门游戏
        <ul>
          <li><a href="#">生化危机</a></li>
          <li><a href="#">红色警戒</a></li>
          <li><a href="#">帝国时代</a></li>
          <li><a href="#">反恐精英</a></li>
        </ul>
      </li>
      <li>
        桌面背景
        <ul>
          <li><a href="#">深谷幽涧</a></li>
          <li><a href="#">群山峻岭</a></li>
          <li><a href="#">茵茵草原</a></li>
          <li><a href="#">热带风暴</a></li>
        </ul>
      </li>
    </ul>
  </body>
  <script>
    var menu, subMenus, menuIcon;

    function init() {
      // 获取所有li集合
      menuArray = document.getElementById("outerul").getElementsByTagName("li");

      for (var i = 0; i < menuArray.length; i++) {
        // 获取所有li里的所有ul
        subMenus = menuArray[i].getElementsByTagName("ul");
        // 判断所有li里的所有ul长度不为空的执行以下
        if (subMenus.length > 0) {
          // 创建一个span标签，设置类名，设置未被点击的背景图片
          menuIcon = document.createElement("span");
          menuIcon.className = "symbolsPlus";
          menuIcon.style.backgroundImage = "url(images/z-plus.jpg)";
          //   菜单图标的点击事件
          menuIcon.onclick = function () {
            // 菜单图标点击后，调用封装好的控制显隐的函数，把菜单的直接父节点传给这个函数
            showHide(this.parentNode); //this指向事件的绑定者
          };
          //把菜单插入到(li里ul长度不为空的)li的第一个孩子节点
          menuArray[i].insertBefore(menuIcon, menuArray[i].firstChild);
          //   隐藏所有一级菜单里的第一个ul
          subMenus[0].style.display = "none";
        } else {
          // 所有li里的ul长度为空的执行以下

          //创建菜单图标，类名，点击后的背景图
          menuIcon = document.createElement("span");
          menuIcon.className = "symbolsSub";
          menuIcon.style.backgroundImage = "url(images/z-top.gif)";
          //把菜单插入到(li里ul长度为空的)li的第一个孩子节点
          menuArray[i].insertBefore(menuIcon, menuArray[i].firstChild);
        }
      }

      //遍历树，将末尾的图片设置为z-end.gif
      // 获取所有ul集合
      var ulArray = document.getElementsByTagName("ul");
      for (var i = 0; i < ulArray.length; i++) {
        // 获取(所有ul中的)li集合
        var liArray = ulArray[i].getElementsByTagName("li");
        // 获取(所有ul中的)li集合里的最后一个li
        var lastli = liArray[liArray.length - 1];
        // 把(所有ul中的)li集合里的最后一个li的第一个孩子节点赋值给span
        var span = lastli.firstChild;
        // 设置最后一个li的第一个孩子节点的背景图片
        span.style.backgroundImage = "url(images/z-end.gif)";
      }
    }

    // 封装一个显示隐藏的函数
    function showHide(parentNode) {
      // 获取被点击菜单图标元素里面的第一个ul
      var ul = parentNode.getElementsByTagName("ul")[0];
      // 利用三步/三元运算，控制点击后ul的显示与隐藏
      ul.style.display = ul.style.display == "none" ? "block" : "none";
      // 获取被点击菜单图标元素里面的第一个图片标签span
      var span = parentNode.getElementsByTagName("span")[0];
      span.style.backgroundImage =
        ul.style.display == "none"
          ? "url(images/z-plus.jpg)"
          : "url(images/z-sub.jpg)";
    }

    // 页面加载完执行init
    window.onload = init;
  </script>
</html>