左侧树形菜单javascript

原创

mob64ca12d3dbd9 2024-05-31 05:36:50 ©著作权

文章标签 HTML CSS 树形菜单 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d3dbd9的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何实现左侧树形菜单JavaScript

1. 整体流程

首先，让我们来看一下整个实现左侧树形菜单的流程。我们可以用下面的表格来展示：

erDiagram
    Table1 {
        | 步骤 | 描述 |
        |----|----|
        | 1 | 创建HTML结构 |
        | 2 | 编写CSS样式 |
        | 3 | 编写JavaScript代码 |
    }

2. 具体步骤

步骤1：创建HTML结构

首先，我们需要创建一个HTML文件，并在其中添加一个具有树形结构的菜单。具体代码如下：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tree">
        <ul>
            <li>
                <span>Menu 1</span>
                <ul>
                    <li>Submenu 1</li>
                    <li>Submenu 2</li>
                </ul>
            </li>
            <li>
                <span>Menu 2</span>
                <ul>
                    <li>Submenu 3</li>
                    <li>Submenu 4</li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>


### 步骤2：编写CSS样式

接下来，我们需要编写CSS样式来美化我们的菜单。具体代码如下：

```markdown
```css
.tree ul {
    list-style-type: none;
    padding: 0;
}

.tree ul ul {
    display: none;
    padding-left: 20px;
}

.tree li {
    margin: 5px 0;
    cursor: pointer;
}

.tree span {
    font-weight: bold;
}

.tree li:hover {
    background-color: #f0f0f0;
}


### 步骤3：编写JavaScript代码

最后，我们需要编写JavaScript代码来实现菜单的交互功能。具体代码如下：

```markdown
```javascript
document.addEventListener('DOMContentLoaded', function() {
    const treeItems = document.querySelectorAll('.tree li');
    
    treeItems.forEach(item => {
        item.addEventListener('click', function() {
            this.querySelector('ul').classList.toggle('open');
        });
    });
});


## 关系图

```mermaid
classDiagram
    class HTML
    class CSS
    class JavaScript
    HTML -- CSS : link stylesheet
    HTML -- JavaScript : link script