使

使用 HTML、CSS 和 Javascript 的简单手风琴菜单

2025-06-10

使用 HTML、CSS 和 Javascript 的简单手风琴菜单

在本文中，我将向您展示如何使用 HTML、CSS 和 JavaScript 代码创建手风琴菜单。之前我展示了多种类型的动画 CSS 手风琴菜单的设计。现在是时候用 JavaScript 重新创建它了。

响应式折叠菜单拥有一个原创标题。点击该标题时，所有与该标题相关的信息都会显示在下方。

手风琴菜单是一种现代化的内容结构，可以将大量信息整齐地排列在一个地方。这种结构适用于不同类型的网站。这种设计主要用于常见问题解答部分或问答部分。

步骤1：在网页上创建一个框

我使用下面的 HTML 和 CSS 代码设计了该页面，并在网页上创建了一个框。我在这里创建了一个框，并在其中添加了所有标题和信息。我使用的框宽度为 500px，背景颜色为白色。

我使用了 box-shadow 来让它看起来更亮。我之前border-radius: 5px把这四个盒子弄得有点圆。

<div class="accordionWrapper">

</div>
Enter fullscreen mode Exit fullscreen mode 
body{

  background: #16bbce;

  }

.accordionWrapper{
  padding:30px;
  background:#fff;
  float:left;
  width:500px;
  border-radius: 5px;
  box-sizing:border-box;
  margin:10%;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);}
Enter fullscreen mode Exit fullscreen mode

在网页上创建一个框

第 2 步：在折叠菜单中添加所有信息

现在，我使用以下 HTML 代码添加了各种标题和信息。下面我分三步添加了三个标题及其信息。

您可以使用图片或其他内容代替这些信息。我在这里添加了 3 个信息部分，您可以根据需要增加或减少数量。

<div class="accordionItem open">
   <h2 class="accordionItemHeading">Accordions Menu HTML CSS <span>+</span></h2>

    <div class="accordionItemContent">
       <p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
    </div>

</div>

<div class="accordionItem close">
   <h2 class="accordionItemHeading">Accordion Menu Javascript  <span>+</span></h2>

    <div class="accordionItemContent">
       <p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
    </div>
</div>

<div class="accordionItem close">
   <h2 class="accordionItemHeading">Accordion Menu Jquery <span>+</span></h2>

    <div class="accordionItemContent">
       <p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading.</p>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

在手风琴菜单中添加所有信息

步骤3：设计上面添加的信息

我已经设计好了使用上述 HTML 代码添加的信息。首先，我设计了标题。我使用了font-size: 22px和background: #2980b9。每个标题都使用了加号 (+)。

.accordionItem{
    float:left;
    display:block;
    width:100%;
    box-sizing: border-box;
    font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
    cursor:pointer;
    margin:0px 0px 10px 0px;
    padding:10px;
    font-size: 22px;
    font-weight: 400;
    background:#2980b9;
    color:#fff;
    width:100%;
    border-radius: 3px;
    box-sizing: border-box;
}
.accordionItemHeading span{
  float: right;
  font-size: 25px;
}
Enter fullscreen mode Exit fullscreen mode

设计上面添加的信息

步骤 4：在菜单关闭时进行设计

现在我已经确定了这个 CSS 手风琴菜单在打开和关闭时的外观。首先，我使用以下代码设计了关闭条件。

这里我用了height: 0px内容的，意思是靠近的时候看不到它的内容。

.close .accordionItemContent{
    height:0px;
    transition:height 1s ease-out;
    transform: scaleY(0);
    float:left;
    display:block;


}
Enter fullscreen mode Exit fullscreen mode

在菜单关闭时进行设计

步骤 5：在菜单打开时进行设计

现在，我使用以下 CSS 代码设计了打开状态。这些代码决定了点击这些标题时内容的显示方式。

这里没有给出内容的具体高度。高度取决于内容的数量。这里我使用了白色作为背景色，并在内容周围添加了浅色边框。

.open .accordionItemContent{
    padding: 20px;
    background-color: #f0f1f1;
    border: 1px solid #ddd;
    width: 100%;
    margin: 0px 0px 10px 0px;
    display:block;
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.4s ease;
    box-sizing: border-box;
}

.open .accordionItemHeading{
    margin:0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #073e63;
    color: #cdd7d8;
}
Enter fullscreen mode Exit fullscreen mode

在菜单打开时设计它

步骤 6：使用 JavaScript 激活简单手风琴菜单

现在，我使用下面的 JavaScript 激活了这个菜单栏。这意味着当你点击某个文本时，就会看到其相关信息。我使用 JavaScript 代码来激活这个作品。

首先我逐一设置了 acordionItem 和 accordionItemHeading 的常量。

var accItem = document.getElementsByClassName('accordionItem');
    var accHD = document.getElementsByClassName('accordionItemHeading');
Enter fullscreen mode Exit fullscreen mode

现在，我已经使用下面的 JavaScript 代码激活了这个动画手风琴菜单栏。希望你了解基本的 JavaScript 知识，如果你不了解，可以观看视频教程。

for (i = 0; i < accHD.length; i++) {
        accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {
        var itemClass = this.parentNode.className;
        for (i = 0; i < accItem.length; i++) {
            accItem[i].className = 'accordionItem close';
        }
        if (itemClass == 'accordionItem close') {
            this.parentNode.className = 'accordionItem open';
        }
    }
Enter fullscreen mode Exit fullscreen mode

使用 JavaScript 激活简单手风琴菜单
希望通过以上教程，您已经学会了如何使用 HTML、CSS 和 JavaScript 创建手风琴菜单。
我已经使用 Bootstrap 和 JQuery 制作过类似的设计。如果您感兴趣，可以看看。

相关文章：

  1. 响应式页脚 HTML CSS
  2. 海得拉巴的国际学校
  3. 使用 JavaScript 的简单秒表
  4. JavaScript 密码生成器
  5. 海得拉巴的IB学校
  6. 使用 HTML CSS 的侧边栏菜单

您可以访问我的博客获取更多类似的教程。https
://www.foolishdeveloper.com/

鏂囩珷鏉ユ簮锛�https://dev.to/shantanu_jana/simple-accordion-menu-using-html-css-javascript-ooo
Devto 翻译
PREV
为什么我不使用 LinkedIn 以及为什么你也应该使用！
NEXT
HTML CSS 和 JavaScript 中的响应式侧边导航栏