HTML 點擊展開菜單是網頁開發中非常常見的功能之一，既方便又美觀。下面是一段簡單的 HTML 點擊展開菜單代碼。 首先，我們需要一個按鈕。這個按鈕是用來觸發展開菜單的。在 HTML 中，我們使用 button 標簽來創建一個按鈕：

<button onclick="myFunction()">點擊展開菜單</button>

接下來，我們需要一個菜單區域。當用戶點擊按鈕時，這個菜單區域會出現。在 HTML 中，我們可以使用 div 標簽來創建一個塊級元素：

<div id="myDropdown" class="dropdown-content">
<a href="#">鏈接 1</a>
<a href="#">鏈接 2</a>
<a href="#">鏈接 3</a>
</div>

現在我們需要一個 JavaScript 函數來處理按鈕的點擊事件。這個函數會控制菜單的出現和隱藏。我們可以在 script 標簽中創建函數：

<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>

這個函數使用了 classList.toggle() 方法來切換 #myDropdown 元素的類名。當點擊按鈕時，這個函數會添加或刪除 "show" 類名，顯示或隱藏 #myDropdown 元素。 最后，我們需要一些 CSS 樣式來美化菜單。我們可以使用 position:absolute 和 display:none 來控制元素位置和是否顯示。

<style>
.dropdown-content {
position: absolute;
display: none;
z-index: 1;
}
.dropdown-content a {
display: block;
}
.show {
display: block;
}
</style>

這些 CSS 樣式會將 #myDropdown 元素定位在按鈕下方，并隱藏它。當按鈕被點擊時，元素會顯示并添加 "show" 類名。 通過組合以上三段代碼，我們就可以實現一個簡單的 HTML 點擊展開菜單。代碼如下：

<button onclick="myFunction()">點擊展開菜單</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">鏈接 1</a>
<a href="#">鏈接 2</a>
<a href="#">鏈接 3</a>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
<style>
.dropdown-content {
position: absolute;
display: none;
z-index: 1;
}
.dropdown-content a {
display: block;
}
.show {
display: block;
}
</style>

你可以根據需要對這些代碼進行修改和擴展。希望這篇文章能對你理解 HTML 點擊展開菜單有所幫助。