menu菜单栏通过动态数组数据交互展示

xxshu_

已于 2023-12-16 23:23:43 修改

阅读量383

点赞数 10

分类专栏： JS HTML+CSS 文章标签：交互 javascript 前端 jquery

于 2023-12-16 22:27:53 首次发布

本文链接：https://blog.csdn.net/xxshu_WEBqd/article/details/135038993

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML+CSS

4 篇文章 0 订阅

订阅专栏

原生JS操作节点方法：

<body>

<nav id="myNav">
<!--  <ul>-->
<!--    <li>-->
<!--      <a href="#">首页</a>-->
<!--        <ul>-->
<!--            <li>菜单1</li>-->
<!--        </ul>-->
<!--    </li>-->
<!--  </ul>-->
</nav>

<script>
  let myNav=document.getElementById("myNav");
  let menu=[
            {name:"首页"},
            {
                name:"博客",
                children:[
                    {name:"菜单一"},
                    {name:"菜单二"},
                    {name:"菜单三"}
                ]
            },
            {
                name:"技术支持",
                children:[
                    {name:"菜单一"},
                    {name:"菜单二"},
                    {name:"菜单三"},
                    {name:"菜单四"}
                ]
            },
            {name:"操作"},
            {name:"帮助"},
            {name:"新闻"},
            {
                name:"新闻222",
                children:[
                    {name:"呵呵呵"}
                ]
            }
        ]


  function showLi(menu,objNode){
      // 创建ul
      let ul=document.createElement("ul");
      console.log(menu)
      menu.forEach(function(item,index){
          let a,li,atext;
          if(item.children){  //有子菜单
              a=document.createElement("a");
              li=document.createElement("li");
              atext=document.createTextNode(item.name);
              a.appendChild(atext)
              li.appendChild(a);
              ul.appendChild(li);

              //样式
              li.className=""
              a.className=""

            //递归调用
            showLi(item.children,li)
          }else{  //没有子菜单
              ul.innerHTML+=`<li><a class="aT">${item.name}</a></li>`
              let aT=document.getElementsByClassName("aT");

          }
      })


      objNode.appendChild(ul);


      let alist=document.getElementsByTagName("a");

      // let alist2=document.querySelectorAll("a");
      //
      // console.log(alist2)


      console.log(alist)

      for(let i=0;i<alist.length;i++){
          alist[i].onclick=function (){
              // console.log(this)
              openMenu(this)
          }
      }

  }



  showLi(menu,myNav)

  function openMenu(obj){
      console.log(obj)
  }
</script>

</body>

jQuery操作节点方法：

<script src="../jquery-3.7.1.js"></script>

    <script>

        let menu=[
            {name:"首页"},
            {
                name:"博客",
                children:[
                    {name:"菜单一"},
                    {name:"菜单二"},
                    {name:"菜单三"}
                ]
            },
            {
                name:"技术支持",
                children:[
                    {name:"菜单一"},
                    {name:"菜单二"},
                    {name:"菜单三"},
                    {name:"菜单四"}
                ]
            },
            {name:"操作"},
            {name:"帮助"},
            {name:"新闻"},
            {
                name:"新闻222",
                children:[
                    {name:"呵呵呵"}
                ]
            }
        ]

        function showLi(menu,objNode){
            // console.log(menu)
            //jquery创建ul节点
            let ul=$("<ul></ul>");
            console.log(ul)
            menu.forEach((item)=>{
                if(item.children){  //有子菜单
                    // console.log(item.children)
                    //jquery创建li节点
                    let li=$(`<li></li>`)
                    //jquery创建a节点
                    let a=$(`<a href="#">${item.name}</a>`)
                    li.append(a);
                    //每循环一次就把符合条件的li添加进ul节点里面
                    ul.append(li)

                    //设置需要的样式
                    li.css("list-style","none")
                    a.css("text-decoration","none")

                    //递归调用
                    showLi(item.children,li);

                }else{  //没有子菜单
                    // console.log(item.children)
                    let li=`<li><a href="#" class="aT">${item.name}</a></li>`
                    // 每循环一次就把符合条件的li添加进ul节点里面
                    ul.append(li);

                }
            })

            objNode.append(ul);

            //设置循环点击a标签的操作
            for(let i=0;i<$("a").length;i++){
                $(`a:eq(${i})`).click(function(){
                    console.log(111)
                    openMenu(this);
                })
            }
        }

        showLi(menu,$("#myNav"))

        //点击a标签的函数
        function openMenu(obj){
            console.log(obj)
        }
    </script>