HTML和JS二級(jí)菜單代碼 在網(wǎng)頁(yè)設(shè)計(jì)中，二級(jí)菜單是一種常見(jiàn)的頁(yè)面組件，它可以幫助用戶(hù)更輕松地瀏覽和使用網(wǎng)站。本文將介紹如何使用HTML和JS來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的二級(jí)菜單。 首先，我們需要?jiǎng)?chuàng)建一個(gè)HTML文件，其中包含ul和li標(biāo)記來(lái)創(chuàng)建一個(gè)嵌套菜單。下面是一個(gè)示例代碼段：

<ul>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1.1</a></li>
<li><a href="#">Submenu 1.2</a></li>
<li><a href="#">Submenu 1.3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
<li><a href="#">Submenu 2.3</a></li>
</ul>
</li>
</ul>

上面的代碼定義了兩個(gè)父菜單，每個(gè)菜單下面有三個(gè)子菜單。但是，這個(gè)二級(jí)菜單不會(huì)顯示出來(lái)，因?yàn)樗枰c一些Javascript代碼一起使用。 為了顯示這個(gè)菜單，我們需要使用Javascript來(lái)顯示和隱藏子菜單。下面是一個(gè)示例代碼段：

<script type="text/javascript">
var dropdowns = document.querySelectorAll('.dropdown');
for (var i = 0; i < dropdowns.length; i++) {
dropdowns[i].addEventListener('click', function() {
this.classList.toggle('open');
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>

上面的代碼使用了querySelectorAll來(lái)查找所有類(lèi)名為dropdown的元素，并使用循環(huán)和addEventListener來(lái)添加事件偵聽(tīng)器。當(dāng)用戶(hù)點(diǎn)擊一個(gè)父菜單時(shí)，該代碼將切換它的開(kāi)/關(guān)狀態(tài)，并顯示或隱藏它的子菜單。 最后，我們需要添加一些CSS樣式來(lái)確保菜單正確地顯示在網(wǎng)頁(yè)中。下面是一個(gè)示例代碼段：

<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
.dropdown.open .dropdown-content {
display: block;
}
</style>

上面的代碼定義了一些基本樣式，如無(wú)序列表的樣式和列表項(xiàng)的顯示方式。它還定義了類(lèi)名為.dropdown和.dropdown-content的元素的位置和樣式。 這些HTML、Javascript和CSS代碼的組合將創(chuàng)建一個(gè)簡(jiǎn)單的二級(jí)菜單，使用戶(hù)更輕松地瀏覽和使用網(wǎng)站。通過(guò)繼續(xù)優(yōu)化這些代碼，你可以創(chuàng)建更復(fù)雜的網(wǎng)頁(yè)組件和功能，讓你的網(wǎng)站更加強(qiáng)大，更方便用戶(hù)。