設(shè)置樹(shù)形菜單的CSS樣式

樹(shù)形菜單是一種常見(jiàn)的導(dǎo)航結(jié)構(gòu)，用于展示網(wǎng)站或應(yīng)用程序的層次關(guān)系，在CSS中，我們可以使用列表（List）和嵌套列表（Nested List）來(lái)創(chuàng)建樹(shù)形菜單，下面是一些基本的CSS樣式設(shè)置，用于創(chuàng)建一個(gè)簡(jiǎn)單的樹(shù)形菜單。

1、HTML結(jié)構(gòu)：我們需要一個(gè)包含列表和嵌套列表的HTML結(jié)構(gòu)。

<ul id="tree-menu">
    <li>菜單項(xiàng)1
        <ul>
            <li>子菜單項(xiàng)1</li>
            <li>子菜單項(xiàng)2</li>
        </ul>
    </li>
    <li>菜單項(xiàng)2
        <ul>
            <li>子菜單項(xiàng)3</li>
            <li>子菜單項(xiàng)4</li>
        </ul>
    </li>
</ul>

2、CSS樣式：我們可以使用CSS來(lái)設(shè)置樹(shù)形菜單的樣式。

#tree-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#tree-menu li {
    margin: 0;
    padding: 5px;
    cursor: pointer;
}
#tree-menu ul {
    margin: 0;
    padding: 0;
}

3、嵌套列表樣式：對(duì)于嵌套列表，我們可以使用CSS的偽元素（Pseudo-elements）來(lái)設(shè)置縮進(jìn)和箭頭。

#tree-menu li:before {
    content: "? ";
    margin-right: 5px;
}

4、JavaScript交互：為了讓樹(shù)形菜單更加交互性，我們可以添加一些JavaScript代碼來(lái)處理點(diǎn)擊事件。

document.getElementById('tree-menu').addEventListener('click', function(event) {
    var target = event.target;
    if (target.tagName === 'LI') {
        target.classList.toggle('expanded'); // 切換展開(kāi)/收起狀態(tài)
    } else if (target.tagName === 'UL') { // 如果點(diǎn)擊的是子菜單，則展開(kāi)或收起所有子項(xiàng)
        var subItems = target.children;
        for (var i = 0; i < subItems.length; i++) {
            subItems[i].classList.toggle('expanded'); // 切換展開(kāi)/收起狀態(tài)
        }
    } else { // 其他情況，不處理點(diǎn)擊事件
        return false; // 防止事件冒泡到其他元素上處理，如鏈接（A）等。
    }
});