本文目錄導(dǎo)讀：

1. HTML結(jié)構(gòu)
2. CSS樣式
3. JavaScript代碼

如何使用CSS實(shí)現(xiàn)點(diǎn)擊顯示二級(jí)菜單

在網(wǎng)頁(yè)設(shè)計(jì)中，使用CSS可以輕松地實(shí)現(xiàn)點(diǎn)擊顯示二級(jí)菜單的功能，下面是一些詳細(xì)的步驟，幫助你快速掌握這個(gè)技巧。

HTML結(jié)構(gòu)

我們需要一個(gè)包含二級(jí)菜單的HTML結(jié)構(gòu)，一個(gè)簡(jiǎn)單的例子如下：

<ul id="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>

CSS樣式

我們需要添加一些CSS樣式來(lái)實(shí)現(xiàn)點(diǎn)擊顯示二級(jí)菜單的功能，以下是一個(gè)基本的樣式示例：

#menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#menu li {
    position: relative;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
}
#menu ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
}

JavaScript代碼

我們需要添加一些JavaScript代碼來(lái)實(shí)現(xiàn)點(diǎn)擊顯示二級(jí)菜單的功能，以下是一個(gè)基本的JavaScript示例：

document.getElementById('menu').addEventListener('click', function(event) {
    var target = event.target;
    if (target.tagName === 'LI') {
        var ul = target.querySelector('ul');
        if (ul) {
            ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
        }
    }
});

當(dāng)你點(diǎn)擊一個(gè)菜單項(xiàng)時(shí)，它的子菜單就會(huì)顯示出來(lái)，如果你再次點(diǎn)擊同一個(gè)菜單項(xiàng)，子菜單就會(huì)隱藏起來(lái)，這是一個(gè)非常基礎(chǔ)的實(shí)現(xiàn)方式，你可以根據(jù)自己的需求進(jìn)行調(diào)整和優(yōu)化。