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

<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>

上面的代碼定義了兩個父菜單，每個菜單下面有三個子菜單。但是，這個二級菜單不會顯示出來，因為它需要與一些Javascript代碼一起使用。 為了顯示這個菜單，我們需要使用Javascript來顯示和隱藏子菜單。下面是一個示例代碼段：

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

<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>

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