js實現樹形選單

阿新 • • 發佈：2020-12-23

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul{
            list-style: none;
        }
        
        .box { 

            width: 500px;
        }

        .box span {
            display: block;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
        }

        .box span.close:before {
            content: "+";
            font-size: 20px;
            font-weight 
: bold;
            color: red;
        }

        .box span.open:before {
            content: "-";
            font-size: 30px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>

<body>
    <ul class="box" id="box" 
>
        <li><span>第一級選單</span>
            <ul>
                <li><span>第二級選單</span>
                    <ul>
                        <li><span>第三級選單</span>
                            <ul>
                                <li><span>第四級選單</span></li>
                                <li><span>第四級選單</span></li>
                            </ul>
                        </li>
                        <li><span>第三級選單</span></li>
                        <li><span>第三級選單</span></li>
                        <li><span>第三級選單</span></li>
                    </ul>
                </li>
                <li><span>第二級選單</span>
                    <ul>
                        <li><span>第三級選單</span></li>
                        <li><span>第三級選單</span></li>
                        <li><span>第三級選單</span></li>
                        <li><span>第三級選單</span></li>
                    </ul>

                </li>
                <li><span>第二級選單</span>
                </li>
                <li><span>第二級選單</span></li>
            </ul>
        </li>
        <li><span>第一級選單</span></li>
        <li><span>第一級選單</span></li>
        <li><span>第一級選單</span></li>
    </ul>
    <script>
        // 1、獲取所有的span元素
        let spans = document.getElementsByTagName('span');

        // 2、判斷一下當前的span有沒有兄弟元素：如果有那它裡面就有東西，這樣就讓當前的span加上close類名，並且讓它的兄弟元素預設隱藏；否則加上open類名
        //這個過程為每一個span前面新增合適的標識：‘+’/‘-’
        for(let i=0;i<spans.length;i++){
            let cur=spans[i];//當前span（當前span要麼是獨生子，要麼是第一個孩子）
            let next=cur.nextElementSibling;//當前span的下一個兄弟元素
            //如果當前span的下一個兄弟元素存在，說明裡面有東西，span可以開啟
            if(cur.nextElementSibling){
                cur.classList.add('close');
                next.style.display='none';
            }else{
                cur.classList.add('open');
            }
        }

        //選單盒子繫結點選事件，由於存在冒泡機制，無論點選選單盒子的哪個位置都會觸發此點選事件，根據事件物件的target目標源來確定當前點選的是哪個span
        box.onclick=function(e){
            let cur=e.target;//當前點選的元素
            //如果點選的元素不是span，那就什麼都不做
            if(cur.nodeName!=='SPAN'){
                return;
            }
            let next=cur.nextElementSibling;//當前span的下一個兄弟元素
            
            //如果當前next有值，那就可以進行開啟和關閉的操作；如果當前next沒有值，那就什麼都不做
            if(next){
                // if(cur.classList.contains('close')){}
                //判斷一下當前的span有沒有close類名:如果有，那就是想要展開;如果沒有，那就是想要關閉
                if(cur.className.includes('close')){
                    cur.className='open';//把類名變成展開
                    next.style.display='block';//讓當前span下的ul顯示
                }else{
                    cur.className='close';//把類名變成關閉
                    next.style.display='none';//讓當前span下的ul隱藏
                    
                    let uls=next.getElementsByTagName('ul');//獲取當前span下一個兄弟元素中所有的ul
                    for(let i=0;i<uls.length;i++){
                        uls[i].style.display='none';//隱藏ul
                        uls[i].previousElementSibling.className='close';//將ul前面span的類名變成關閉
                    }
                }
            }
        };
    </script>
</body>

</html>