基础 CSS 手风琴子菜单切换(1)

📌 相关文章

📜 基础 CSS 手风琴子菜单切换(1)

📅 最后修改于: 2023-12-03 15:37:49.354000 🧑 作者: Mango

基础 CSS 手风琴子菜单切换

手风琴子菜单切换，也叫做手风琴式导航菜单，是一种常见的网页菜单效果。当用户点击父级菜单时，对应的子菜单展开，其他子菜单则收起。这种效果可以为网页带来更加清晰的导航体验，提升用户的使用体验。

本文介绍如何使用基础 CSS 来实现手风琴子菜单切换的效果。我们将以一个简单的示例来讲解实现过程。

示例代码

HTML：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-title">菜单1</div>
    <div class="accordion-content">
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
      </ul>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">菜单2</div>
    <div class="accordion-content">
      <ul>
        <li><a href="#">子菜单4</a></li>
        <li><a href="#">子菜单5</a></li>
        <li><a href="#">子菜单6</a></li>
      </ul>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">菜单3</div>
    <div class="accordion-content">
      <ul>
        <li><a href="#">子菜单7</a></li>
        <li><a href="#">子菜单8</a></li>
        <li><a href="#">子菜单9</a></li>
      </ul>
    </div>
  </div>
</div>

CSS：

.accordion {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  flex: 1;
}

.accordion-title {
  padding: 12px 16px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.accordion-content {
  padding: 0 16px;
  display: none;
}

.accordion-item.active .accordion-content {
  display: block;
}

实现思路

在 HTML 架构中，我们将所有的菜单项包装在一个名为 .accordion 的容器中。每个菜单项包含一个标题（.accordion-title）和一个内容块（.accordion-content）。我们使用 CSS 的 display 属性来实现菜单内容的展开和收起。

具体来说，我们将每个菜单项的内容块（.accordion-content）默认设为不可见（display: none）。当用户点击菜单的标题（.accordion-title）时，我们通过 JavaScript 代码来动态地将对应菜单项的内容块设为可见（display: block）。

CSS 代码解析

首先，我们将容器（.accordion）设为 flex 布局，并将其 flex-direction 属性设为 column，以实现纵向排列的效果。

.accordion {
  display: flex;
  flex-direction: column;
}

接着，我们将每个菜单项（.accordion-item）设为占据容器内剩余空间的弹性盒子，以实现等分容器高度的效果。

.accordion-item {
  flex: 1;
}

然后，我们为菜单标题（.accordion-title）设置样式，包括背景色、内边距和鼠标样式等。

.accordion-title {
  padding: 12px 16px;
  background-color: #f0f0f0;
  cursor: pointer;
}

最后，我们把菜单内容块（.accordion-content）的 display 属性设为 none，以使其默认不可见。同时，我们通过 .accordion-item.active .accordion-content 选择器来指定当前激活的菜单项的内容块，将其 display 属性设为 block，以实现展开效果。

.accordion-content {
  padding: 0 16px;
  display: none;
}

.accordion-item.active .accordion-content {
  display: block;
}

JavaScript 代码

要实现手风琴子菜单的动态效果，我们需要编写一些 JavaScript 代码。具体来说，我们需要为每个菜单标题添加 click 事件监听器，在点击时动态地为对应的菜单项添加和移除 active 类。

const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(item => {
  const title = item.querySelector('.accordion-title');

  title.addEventListener('click', () => {
    accordionItems.forEach(item => item.classList.remove('active'));
    item.classList.add('active');
  });
});

总结

通过简单的 HTML、CSS 和 JavaScript 代码，我们实现了一个基础的手风琴子菜单切换效果。另外，为了便于在不同项目中使用，我们可以将实现过程封装成一个可复用的模块，以便于在不同的场景下灵活运用。

完整代码请见下方：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>基础 CSS 手风琴子菜单切换</title>
    <style>
      .accordion {
        display: flex;
        flex-direction: column;
      }

      .accordion-item {
        flex: 1;
      }

      .accordion-title {
        padding: 12px 16px;
        background-color: #f0f0f0;
        cursor: pointer;
      }

      .accordion-content {
        padding: 0 16px;
        display: none;
      }

      .accordion-item.active .accordion-content {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="accordion">
      <div class="accordion-item">
        <div class="accordion-title">菜单1</div>
        <div class="accordion-content">
          <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
            <li><a href="#">子菜单3</a></li>
          </ul>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-title">菜单2</div>
        <div class="accordion-content">
          <ul>
            <li><a href="#">子菜单4</a></li>
            <li><a href="#">子菜单5</a></li>
            <li><a href="#">子菜单6</a></li>
          </ul>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-title">菜单3</div>
        <div class="accordion-content">
          <ul>
            <li><a href="#">子菜单7</a></li>
            <li><a href="#">子菜单8</a></li>
            <li><a href="#">子菜单9</a></li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      const accordionItems = document.querySelectorAll('.accordion-item');

      accordionItems.forEach(item => {
        const title = item.querySelector('.accordion-title');

        title.addEventListener('click', () => {
          accordionItems.forEach(item => item.classList.remove('active'));
          item.classList.add('active');
        });
      });
    </script>
  </body>
</html>