多级菜单-事件委托

最新推荐文章于 2023-02-23 19:45:03 发布

胖妮儿

最新推荐文章于 2023-02-23 19:45:03 发布

阅读量451

点赞数

分类专栏：原生js例子文章标签：多级菜单事件委托

本文链接：https://blog.csdn.net/pony_pony/article/details/79058948

版权

原生js例子专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html布局：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>多级菜单</title>
      <link rel="stylesheet" type="text/css" href="css/menu.css"/>
   </head>
   <body>
      <ul id="menu">
         <li>
            <em></em><span>一</span>
            <ul class="menuTwo">
               <li>
                  <span>1-1</span>
               </li>
               <li>
                  <em></em><span>1-2</span>
                  <ul class="menuThree">
                     <li>
                        <span>1-2-1</span>
                     </li>
                     <li>
                        <em></em><span>1-2-2</span>
                        <ul class="menuFour">
                           <li>
                              <span>1-2-2-1</span>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </li>
               <li>
                  <em></em><span>1-3</span>
                  <ul class="menuThree">
                     <li>
                        <span>1-3-1</span>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
         <li>
            <em></em><span>二</span>
            <ul class="menuTwo">
               <li>
                  <em></em><span>2-1</span>
                  <ul class="menuThree">
                     <li>
                        <span>2-1-1</span>
                     </li>
                     <li>
                        <em></em><span>2-1-2</span>
                        <ul class="menuFour">
                           <li>
                              <span>2-1-2-1</span>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </li>
               <li>
                  <em></em><span>2-2</span>
                  <ul class="menuThree">
                     <li>
                        <span>2-2-1</span>
                     </li>
                     <li>
                        <span>2-2-2</span>
                     </li>
                  </ul>
               </li>
               <li>
                  <span>2-3</span>
               </li>
            </ul>
         </li>
         <li>
            <em></em><span>三</span>
            <ul class="menuTwo">
               <li>
                  <span>3-1</span>
               </li>
               <li>
                  <span>3-2</span>
               </li>
               <li>
                  <span>3-3</span>
               </li>
            </ul>
         </li>
         <li>
            <span>四</span>
         </li>
      </ul>
      
   </body>

</html>

< script > $( "em"). click( function () { $( this). toggleClass( "open"). next(). next(). stop(). slideToggle(). find( "ul"). css({ display: "none"}). prevAll( "em"). removeClass( "open"); }) </ script >

原生js：

let menu=document.getElementById("menu");
let ems=menu.getElementsByTagName("em");
//给所有的em和em后面的span加上小手效果
for(let i=0;i<ems.length;i++){
    ems[i].className="cursor";
    $.next(ems[i]).className="cursor";
}

menu.οnclick=function (e) {
    if(e.target.tagName=="EM"){
        //为了统一我们都传进span进去
        menuPlay($.next(e.target));
    }else if(e.target.tagName=="SPAN"){
        menuPlay(e.target);
    }
};

function menuPlay(ele) {
    //ele就是当前这个span
    //获取取span后面的弟弟ul
    let oUl=$.next(ele);
    //只有oUl存在时候我们才进行下面的操作
    if(oUl){
        //记录当前oUl的display状态
        let flag=$.css(oUl,"display");
        if(flag=="none"){
            //之前是none现在变成block,不要忘记将状态值flag变成"block"
            $.css(oUl,"display","block");
            flag="block";
            //将em(ele的哥哥)的className变成open
            $.prev(ele).className="open";
        }else {
            $.css(oUl,"display","none");
            flag="none";
            $.prev(ele).className="";
            //不仅让当前这个oUl收起来还需要将这个oUl下面的所有的ul全都收起来
            //获取当前oUl下面所有的ul
            let oUls=oUl.getElementsByTagName("ul");
            //循环所有的ul将其display变成none
            for(let i=0;i<oUls.length;i++){
                oUls[i].style.display="none";
                //oUls[i]对应的em的className='';
                $.prev($.prev(oUls[i])).className="";
            }
        }
    }
}

胖妮儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多级菜单-事件委托

html布局：html>html> head> meta charset="UTF-8"> title>多级菜单title> link rel="stylesheet" type="text/css" href="css/menu.css"/> head> body> ul id="menu"> li>
复制链接

扫一扫

专栏目录