js怎么写折叠菜单

折叠菜单（Accordion Menu）的实现原理和方法包括：定义HTML结构、编写CSS样式、编写JavaScript代码。本文将详细介绍如何通过这三个步骤来实现一个折叠菜单，并提供一些优化和扩展的方法。

一、定义HTML结构

首先，我们需要一个HTML结构来表示折叠菜单的各个部分。在这个结构中，每一个菜单项都有一个标题和一个内容部分。我们可以使用<div>元素来表示这些部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折叠菜单示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-header">标题1</div>
            <div class="accordion-content">内容1</div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header">标题2</div>
            <div class="accordion-content">内容2</div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header">标题3</div>
            <div class="accordion-content">内容3</div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、编写CSS样式

接下来，我们需要编写一些CSS样式来美化我们的折叠菜单，并确保内容部分在默认情况下是隐藏的。我们可以使用display: none来隐藏内容部分，然后在JavaScript中动态地显示它们。

/* styles.css */
.accordion {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.accordion-item {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
}
.accordion-header {
    background-color: #f7f7f7;
    padding: 15px;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
}
.accordion-content {
    display: none;
    padding: 15px;
    background-color: #fff;
}

三、编写JavaScript代码

最后，我们需要编写JavaScript代码来实现点击标题时显示或隐藏内容部分的功能。

// script.js
document.addEventListener('DOMContentLoaded', function () {
    var headers = document.querySelectorAll('.accordion-header');
    headers.forEach(function (header) {
        header.addEventListener('click', function () {
            var content = this.nextElementSibling;
            if (content.style.display === 'block') {
                content.style.display = 'none';
            } else {
                content.style.display = 'block';
            }
        });
    });
});

四、优化和扩展

我们可以对折叠菜单进行一些优化和扩展，例如：添加动画效果、实现多层折叠菜单、添加图标。

1、添加动画效果

我们可以使用CSS的transition属性来实现内容部分的滑动显示和隐藏效果。

/* styles.css */
.accordion-content {
    display: none;
    padding: 0 15px;
    background-color: #fff;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}
.accordion-content.show {
    height: auto;
    padding: 15px;
}

// script.js
document.addEventListener('DOMContentLoaded', function () {
    var headers = document.querySelectorAll('.accordion-header');
    headers.forEach(function (header) {
        header.addEventListener('click', function () {
            var content = this.nextElementSibling;
            if (content.classList.contains('show')) {
                content.classList.remove('show');
            } else {
                document.querySelectorAll('.accordion-content').forEach(function (content) {
                    content.classList.remove('show');
                });
                content.classList.add('show');
            }
        });
    });
});

2、实现多层折叠菜单

如果需要多层折叠菜单，可以在每个内容部分中再嵌套一个折叠菜单结构。

<div class="accordion-content">
    <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-header">子标题1</div>
            <div class="accordion-content">子内容1</div>
        </div>
        <!-- 更多子菜单项 -->
    </div>
</div>

3、添加图标

我们可以在标题部分添加图标，显示当前菜单项的状态（展开或折叠）。

<div class="accordion-header">
    标题1
    <span class="icon">+</span>
</div>

.accordion-header .icon {
    float: right;
    transition: transform 0.3s ease;
}
.accordion-header.active .icon {
    transform: rotate(45deg);
}

// script.js
document.addEventListener('DOMContentLoaded', function () {
    var headers = document.querySelectorAll('.accordion-header');
    headers.forEach(function (header) {
        header.addEventListener('click', function () {
            var content = this.nextElementSibling;
            var icon = this.querySelector('.icon');
            if (content.classList.contains('show')) {
                content.classList.remove('show');
                this.classList.remove('active');
            } else {
                document.querySelectorAll('.accordion-content').forEach(function (content) {
                    content.classList.remove('show');
                });
                document.querySelectorAll('.accordion-header').forEach(function (header) {
                    header.classList.remove('active');
                });
                content.classList.add('show');
                this.classList.add('active');
            }
        });
    });
});

通过上述步骤，我们已经实现了一个基本的折叠菜单，并进行了优化和扩展。希望这些内容对你有所帮助。