js制作簡單的樹形菜單 JavaScript制作樹形菜單
樹形菜單在Web開發(fā)中很常見,可以用于導航菜單、文件瀏覽器等功能。在本文中,我們將使用JavaScript來制作一個簡單的樹形菜單。一、準備工作在開始編寫樹形菜單之前,首先需要準備好HTML和CSS部
樹形菜單在Web開發(fā)中很常見,可以用于導航菜單、文件瀏覽器等功能。在本文中,我們將使用JavaScript來制作一個簡單的樹形菜單。
一、準備工作
在開始編寫樹形菜單之前,首先需要準備好HTML和CSS部分。我們可以使用一個無序列表(ul)和一些CSS樣式來創(chuàng)建一個基本的樹形結(jié)構(gòu)。
```
/* 樹形菜單樣式 */
.tree,
.tree ul {
list-style: none;
margin: 0;
padding: 0;
}
.tree li {
margin: 0;
padding: 10px 5px;
position: relative;
}
.tree li::before,
.tree li::after {
content: '';
left: -20px;
position: absolute;
right: auto;
}
.tree li::before {
border-left: 1px solid #999;
bottom: 50px;
height: 100%;
top: 0;
width: 1px;
}
.tree li::after {
border-top: 1px solid #999;
height: 20px;
top: 25px;
width: 25px;
}
.tree li:only-child::before {
display: none;
}
.tree li:last-child::before {
height: 30px;
}
.tree li:last-child::after {
height: 20px;
top: -10px;
width: 25px;
}
/* 菜單項樣式 */
.tree li a {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
display: inline-block;
padding: 5px 10px;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.tree li a:hover,
.tree li a:focus {
background-color: #e8e8e8;
}
```
以上代碼中,我們使用了一個無序列表和一些CSS樣式來創(chuàng)建一個樹形結(jié)構(gòu)。菜單項均使用``````標簽表示,并且通過嵌套``````和```
二、編寫JavaScript代碼
接下來,我們需要編寫一些JavaScript代碼來實現(xiàn)樹形菜單的交互效果。具體的代碼如下:
```
```
在以上代碼中,我們首先使用```document.querySelectorAll('.tree li')```獲取到所有的菜單項,并使用```()```遍歷每個菜單項。然后,我們查找每個菜單項下的子菜單,并為擁有子菜單的菜單項添加一個可展開的圖標。
通過為圖標添加點擊事件,我們可以切換子菜單的顯示狀態(tài)。具體做法是給子菜單添加一個名為「expanded」的CSS類,該類將修改子菜單的顯示樣式。
三、運行效果
經(jīng)過上述準備工作和編寫JavaScript代碼,我們已經(jīng)完成了一個簡單的樹形菜單。通過打開瀏覽器查看頁面,并點擊菜單項旁邊的圖標,我們可以看到子菜單的展開與收起效果。
到此,我們詳細介紹了如何使用JavaScript制作一個簡單的樹形菜單。希望本文對你理解和應用樹形菜單有所幫助。如果你有任何問題或建議,歡迎留言討論。
參考鏈接:
- [MDN: HTML]()
- [MDN: CSS]()
- [MDN: JavaScript]()
作者:百度經(jīng)驗作者
來源:百度經(jīng)驗(鏈接)
版權(quán)聲明:本文為原創(chuàng)文章,版權(quán)歸作者所有。未經(jīng)作者允許,不得轉(zhuǎn)載。