怎么用js弄出树形菜单

要用JavaScript实现树形菜单，可以通过以下几个步骤：创建HTML结构、编写CSS样式、编写JavaScript代码来实现交互。 下面将详细描述每一个步骤，并给出具体的代码示例。

一、HTML结构

首先，需要定义树形菜单的HTML结构。HTML结构决定了树形菜单的层次关系和内容。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="tree-menu">
        <ul>
            <li>
                <span>Parent 1</span>
                <ul>
                    <li><span>Child 1.1</span></li>
                    <li><span>Child 1.2</span></li>
                </ul>
            </li>
            <li>
                <span>Parent 2</span>
                <ul>
                    <li><span>Child 2.1</span></li>
                    <li>
                        <span>Child 2.2</span>
                        <ul>
                            <li><span>Grandchild 2.2.1</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式

接下来，需要编写CSS样式，使树形菜单在页面上美观展示，并通过样式控制菜单的展开和折叠。

/* styles.css */

#tree-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#tree-menu ul ul {
    display: none;
}
#tree-menu li {
    margin: 0;
    padding: 0 0 0 20px;
    position: relative;
}
#tree-menu li span {
    cursor: pointer;
    display: inline-block;
}
#tree-menu li span::before {
    content: '25B6'; /* Right-pointing triangle */
    display: inline-block;
    margin-right: 5px;
}
#tree-menu li.open > span::before {
    content: '25BC'; /* Down-pointing triangle */
}

三、JavaScript代码

最后，需要编写JavaScript代码来实现树形菜单的交互功能，即点击父节点时展开或折叠子节点。

// script.js

document.addEventListener('DOMContentLoaded', function() {
    const treeMenu = document.getElementById('tree-menu');
    treeMenu.addEventListener('click', function(event) {
        if (event.target.tagName === 'SPAN') {
            const parentLi = event.target.parentElement;
            parentLi.classList.toggle('open');
            const childUl = parentLi.querySelector('ul');
            if (childUl) {
                if (parentLi.classList.contains('open')) {
                    childUl.style.display = 'block';
                } else {
                    childUl.style.display = 'none';
                }
            }
        }
    });
});

四、优化与扩展

现在已经实现了一个基本的树形菜单，但是我们可以进一步优化和扩展，使其更强大和灵活。

1、动态生成树形菜单

可以使用JavaScript动态生成树形菜单，而不是在HTML中硬编码。这样可以根据需要动态加载数据。

const data = [

    {
        text: 'Parent 1',
        children: [
            { text: 'Child 1.1' },
            { text: 'Child 1.2' }
        ]
    },
    {
        text: 'Parent 2',
        children: [
            { text: 'Child 2.1' },
            {
                text: 'Child 2.2',
                children: [
                    { text: 'Grandchild 2.2.1' }
                ]
            }
        ]
    }
];
function createTreeMenu(container, data) {
    const ul = document.createElement('ul');
    data.forEach(item => {
        const li = document.createElement('li');
        const span = document.createElement('span');
        span.textContent = item.text;
        li.appendChild(span);
        if (item.children) {
            createTreeMenu(li, item.children);
        }
        ul.appendChild(li);
    });
    container.appendChild(ul);
}
document.addEventListener('DOMContentLoaded', function() {
    const treeMenu = document.getElementById('tree-menu');
    createTreeMenu(treeMenu, data);
    treeMenu.addEventListener('click', function(event) {
        if (event.target.tagName === 'SPAN') {
            const parentLi = event.target.parentElement;
            parentLi.classList.toggle('open');
            const childUl = parentLi.querySelector('ul');
            if (childUl) {
                if (parentLi.classList.contains('open')) {
                    childUl.style.display = 'block';
                } else {
                    childUl.style.display = 'none';
                }
            }
        }
    });
});

2、使用递归创建树形菜单

递归函数可以简化代码，并使其更具可读性和可维护性。

function createTreeMenu(container, data) {

    const ul = document.createElement('ul');
    data.forEach(item => {
        const li = document.createElement('li');
        const span = document.createElement('span');
        span.textContent = item.text;
        li.appendChild(span);
        if (item.children) {
            const childUl = createTreeMenu(document.createElement('div'), item.children);
            li.appendChild(childUl);
        }
        ul.appendChild(li);
    });
    container.appendChild(ul);
    return ul;
}

3、样式与动画优化

可以通过CSS动画使展开和折叠过程更平滑。

/* styles.css */

#tree-menu ul ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
#tree-menu li.open > ul {
    max-height: 1000px; /* A large enough value to show the full content */
    transition: max-height 0.5s ease-in;
}

五、综合示例

将所有代码整合在一起，形成一个完整的树形菜单实现。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="tree-menu"></div>
    <script src="script.js"></script>
</body>
</html>

/* styles.css */

#tree-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#tree-menu ul ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
#tree-menu li {
    margin: 0;
    padding: 0 0 0 20px;
    position: relative;
}
#tree-menu li span {
    cursor: pointer;
    display: inline-block;
}
#tree-menu li span::before {
    content: '25B6'; /* Right-pointing triangle */
    display: inline-block;
    margin-right: 5px;
}
#tree-menu li.open > span::before {
    content: '25BC'; /* Down-pointing triangle */
}
#tree-menu li.open > ul {
    max-height: 1000px; /* A large enough value to show the full content */
    transition: max-height 0.5s ease-in;
}

// script.js

const data = [
    {
        text: 'Parent 1',
        children: [
            { text: 'Child 1.1' },
            { text: 'Child 1.2' }
        ]
    },
    {
        text: 'Parent 2',
        children: [
            { text: 'Child 2.1' },
            {
                text: 'Child 2.2',
                children: [
                    { text: 'Grandchild 2.2.1' }
                ]
            }
        ]
    }
];
function createTreeMenu(container, data) {
    const ul = document.createElement('ul');
    data.forEach(item => {
        const li = document.createElement('li');
        const span = document.createElement('span');
        span.textContent = item.text;
        li.appendChild(span);
        if (item.children) {
            const childUl = createTreeMenu(document.createElement('div'), item.children);
            li.appendChild(childUl);
        }
        ul.appendChild(li);
    });
    container.appendChild(ul);
    return ul;
}
document.addEventListener('DOMContentLoaded', function() {
    const treeMenu = document.getElementById('tree-menu');
    createTreeMenu(treeMenu, data);
    treeMenu.addEventListener('click', function(event) {
        if (event.target.tagName === 'SPAN') {
            const parentLi = event.target.parentElement;
            parentLi.classList.toggle('open');
            const childUl = parentLi.querySelector('ul');
            if (childUl) {
                if (parentLi.classList.contains('open')) {
                    childUl.style.display = 'block';
                } else {
                    childUl.style.display = 'none';
                }
            }
        }
    });
});

六、总结

通过以上步骤，我们详细介绍了如何用JavaScript实现树形菜单。首先创建了基本的HTML结构，然后通过CSS样式进行美化，最后使用JavaScript实现交互功能。通过这些步骤，可以轻松创建一个功能齐全、用户友好的树形菜单系统。

在实际项目中，推荐使用专业的项目管理系统来管理项目和任务。研发项目管理系统PingCode和通用项目协作软件Worktile都是不错的选择，它们提供了强大的功能和灵活的定制选项，能够显著提高团队的协作效率和项目管理的效果。

相关问答FAQs：

1. 如何使用JavaScript创建树形菜单？

JavaScript可以通过以下步骤来创建树形菜单：

• 首先，创建一个包含菜单项和子菜单的数据结构，可以使用数组或对象来表示。
• 然后，使用JavaScript DOM方法创建菜单的HTML结构，并添加相应的样式。
• 接下来，使用JavaScript的事件处理功能，为菜单项添加点击事件，以展开或收起子菜单。
• 最后，使用递归函数遍历菜单数据，将菜单项和子菜单动态地添加到HTML结构中。

2. 如何在树形菜单中添加图标？

要在树形菜单中添加图标，可以使用以下方法：

• 首先，为每个菜单项定义一个图标元素，可以使用HTML的<i>或<span>标签。
• 然后，在CSS样式表中为图标元素设置合适的字体图标或自定义图标的样式。
• 最后，在JavaScript中根据菜单项的层级关系，为每个菜单项添加相应的图标类名或样式。

3. 如何实现树形菜单的展开和折叠功能？

要实现树形菜单的展开和折叠功能，可以按照以下步骤进行操作：

• 首先，在菜单项的HTML结构中添加一个用于展示子菜单的容器，可以使用<ul>或<div>标签。
• 然后，使用JavaScript的事件处理功能，为菜单项的点击事件添加一个函数。
• 在点击事件的函数中，根据菜单项的展开状态，切换子菜单容器的显示或隐藏。
• 最后，为菜单项添加一个标识，用于记录当前菜单项的展开状态，以便在下次点击时进行判断和操作。

这些是关于使用JavaScript创建树形菜单的常见问题，希望对你有所帮助！如有其他问题，请随时提问。