JavaScript 如何构建手风琴菜单

手风琴用于通过添加可折叠效果来渲染、隐藏或切换内容的视图。它有助于以紧凑且视觉上吸引人的方式管理和组织信息。手风琴菜单可以包含嵌套的手风琴，以便以组织和系统化的格式呈现大量内容。在本文中，我们将演示如何使用JavaScript构建动态手风琴。在这里，手风琴将包含一些标题和描述，并具有添加更多项目的功能。最终，手风琴的外观将类似于下面的图像：

先决条件

方法

以下方法将用于创建具有动态功能的手风琴菜单，并将其包括在手风琴中：

创建具有手风琴类的

div>，其中包含具有类名和ID的不同输入字段和按钮标签。
* 使用类和元素添加不同的样式属性到手风琴中，以定义填充、边距、文本字体大小、对齐方式、颜色等特定元素。
* 在JavaScript中，声明两个数组，分别包含标题和描述细节，并声明loadItems()方法，使用JavaScript数组.map()方法来呈现数组/列表中的初始项目。
* 定义addItem()方法，用于添加用户通过输入验证的新的自定义主题和其描述。
* 现在，创建createItem()方法，用于声明创建每个组件（无论是自定义还是预定义项），并借助createElement()、classList()和appendChild()方法将其插入到Html DOM中。在这里，用户只需单击各个主题以展开描述部分，并且还可以在手风琴中设置更多自定义主题。

项目结构

JavaScript 如何构建手风琴菜单

示例： 该示例描述了使用JavaScript创建手风琴菜单的基本实现。

JavaScript

// script.js 
  
// Creating list of title and description 
const accordionTitles = [ 
    "What is HTML?", 
    "What is CSS?", 
    "What is JavaScript?", 
]; 
const accordionDesc = [ 
  
    `HTML stands for HyperText Markup Language. 
    It is used to design web pages using a markup language.`, 
  
    `Cascading Style Sheets, fondly referred to as  
    CSS, is a simply designed language intended to 
    simplify the process of making web pages presentable.`, 
  
    `JavaScript is a lightweight, cross-platform, 
    single-threaded, and interpreted compiled 
    programming language which is also known 
    as the scripting language for webpages`, 
]; 
  
// To load items in start 
function loadItem() { 
    accordionTitles.map((e, i) => { 
        createItem(e, accordionDesc[i]); 
    }); 
} 
loadItem(); 
  
// Funcion to add new items 
function addItem() { 
    // Getting value from input 
    const title = document.getElementById("title").value; 
    const des = 
        document.getElementById("description").value; 
  
    // Validating input values 
    if (!title || !des) { 
        window.alert("Incomplete input"); 
    } else { 
        createItem(title, des); 
    } 
} 
  
// Function to show items in accordion 
function createItem(title, desc) { 
  
    // Creating new item in accordion 
    // Creating title component 
    const head = document.createElement("div"); 
    head.classList.add("accordion-header"); 
    head.innerText = title; 
  
    // Creting description component 
    const des = document.createElement("div"); 
    des.classList.add("accordion-content"); 
  
    const p = document.createElement("p"); 
    p.innerText = desc; 
    des.appendChild(p); 
  
    const item = document.createElement("div"); 
    head.classList.add("accordion-item"); 
  
    // To hide or show descripton on click 
    head.addEventListener("click", () => { 
        des.classList.toggle("active"); 
        if (des.style.display === "block") { 
            des.style.display = "none"; 
        } else { 
            des.style.display = "block"; 
        } 
    }); 
  
    // Combine title and desc into new item 
    item.appendChild(head); 
    item.appendChild(des); 
    document.getElementById("menu").appendChild(item); 
}

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title></title> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1" /> 
    <link href="style.css" 
          rel="stylesheet" /> 
    <script src="script.js"></script> 
</head> 
  
<body> 
    <!-- Card container for project -->
    <div class="card"> 
        
        <!-- Heading or title -->
        <h2>Dynamic Accordion using JavaScript</h2> 
  
        <!-- container for accordion items -->
        <div class="accordion" 
             id="menu"></div> 
  
        <!-- Input for new item -->
        <div class="add"> 
            <h3>Add Custom</h3> 
            <input type="text" 
                   id="title" 
                   placeholder="Title" /> 
            <input type="text" 
                   id="description"
                   placeholder="Description" /> 
            <button type="submit" 
                    onclick="addItem()"> 
                Add Item 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

/* style.css */
  
/* Importing font family */
@import url( 
"https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"); 
  
/* Styling universal selector */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
/* Style body element */
body { 
    min-height: 50vh; 
    display: flex; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    background: hsl(137, 100%, 86%); 
    font-family: "Poppins", sans-serif; 
} 
  
/* Styling card container */
.card { 
    max-width: 33rem; 
    background: #fff; 
    margin: 0 1rem; 
    padding: 1rem; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
    width: 100%; 
    border-radius: 0.5rem; 
} 
  
/* style accordion */
.accordion { 
    margin: 5%; 
    text-align: left; 
} 
  
/* style for accordion items */
.accordion-item { 
    border-bottom: 1px solid #ddd; 
    font-size: larger; 
} 
  
/* Style for accordion head/title */
.accordion-header { 
    background-color: #f5f5f5; 
    padding: 10px; 
    cursor: pointer; 
} 
  
/* Accordion item description */
.accordion-content { 
    padding: 10px; 
    display: none; 
} 
  
/* Input box and button */
.add { 
    padding: auto; 
} 
  
#title { 
    width: 4vw; 
    font-size: larger; 
} 
  
#description { 
    font-size: large; 
    width: 14vw; 
} 
  
button { 
    border-radius: 5px; 
    padding: 5px; 
    font-size: large; 
    color: #dbeefa; 
    background-color: rgb(151, 161, 133); 
}