html+css+js手写手风琴动态展示效果

最新推荐文章于 2025-04-21 18:01:51 发布

敲键盘的小徐

最新推荐文章于 2025-04-21 18:01:51 发布

阅读量183

点赞数 8

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_74828130/article/details/145810434

版权

效果图：（点击后该项展开/或有单独样式+其它项折叠）完整的代码在最后

// 对所有的 .item 元素进行遍历
document.querySelectorAll(".item").forEach((item) => {
  // 为每个 .item 元素添加点击事件监听器
  item.addEventListener("click", () => {
    
    // 先折叠所有的 .item 元素
    document.querySelectorAll(".item").forEach((i) => {
      // 移除每个 .item 元素的 "open" 类
      i.classList.remove("open");
    });

    // 将当前点击的 .item 元素展开
    item.classList.add("open");
  });
});

document.querySelectorAll(".item").forEach((item) => {

querySelectorAll 选取所有的 .item 元素，forEach 用于遍历这些元素。item 代表当前遍历到的单个 .item 元素。

item.addEventListener("click", () => {

给当前的 item 元素添加一个 click 事件监听器，当用户点击这个元素时，会执行后面的回调函数。

document.querySelectorAll(".item").forEach((i) => {

在点击事件内，再次遍历所有的 .item 元素，这样可以处理折叠所有 .item 元素的过程。

i.classList.remove("open");

移除每个 .item 元素的 open 类，这个操作会让所有的 .item 元素折叠。

item.classList.add("open");

给当前被点击的 item 元素添加 open 类，展开它。

css（主要部分）

 <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      .container {
       
        display: flex;
        width: 80vw;
        justify-content: space-between;
        margin: auto;
        margin-top: 20vh;
      }

      .item {
        background-color: #f1f1f1;
        border: 1px solid #ddd;
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
      }

      .item .content {
        padding: 20px;
        display: none; /* 默认隐藏文字 */
      }

      /* 默认状态，第一个展开，其他折叠 */
      .item-1 {
        /* width: 400px; */
      }
      .item-1,
      .item-2,
      .item-3,
      .item-4,
      .item-5 {
        width: 200px;
        height: 520px;
      }

      .item-1 .content {
        display: block; /* 显示文字 */
      }

      /* 当项目被点击时，展开对应的文字 */
      .item.open {
        width: 650px;
      }

      .item.open .content {
        position: absolute;
        height: 50%;
        width: 100%;
        background-color: rgb(195, 255, 0);
        top: 0;
        display: block;
      }
      .item .content .title {
        display: flex;
        flex-wrap: nowrap;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 22px;
        color: #000000;
        line-height: 60px;
      }
      .item .content .title .icon {
        width: 60px;
        height: 60px;
        background: #ffffff;
        border-radius: 50%;
        margin-right: 14px;
      }
      .item .content .describe {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        margin-top: 38px;
      }

      /* 鼠标悬停效果 */
      .item:hover {
        background-color: #ddd;
      }
      /* 项目没被点击时的默认样式 */
      .item.open .default {
        display: none;
      }
      .item .default {
        position: absolute;
        height: 30%;
        width: 100%;
        background-color: red;
        display: grid;
        place-items: center;
        top: 0;
      }
      .item .default .icon {
        width: 60px;
        height: 60px;
        background: #ffffff;
        border-radius: 50%;
      }
      .item .default .text {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 22px;
        color: #ffffff;
        line-height: 34px;
      }
    </style>

完整代码：

<!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" />
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      .container {
       
        display: flex;
        width: 80vw;
        justify-content: space-between;
        margin: auto;
        margin-top: 20vh;
      }

      .item {
        background-color: #f1f1f1;
        border: 1px solid #ddd;
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
      }

      .item .content {
        padding: 20px;
        display: none; /* 默认隐藏文字 */
      }

      /* 默认状态，第一个展开，其他折叠 */
      .item-1 {
        /* width: 400px; */
      }
      .item-1,
      .item-2,
      .item-3,
      .item-4,
      .item-5 {
        width: 200px;
        height: 520px;
      }

      .item-1 .content {
        display: block; /* 显示文字 */
      }

      /* 当项目被点击时，展开对应的文字 */
      .item.open {
        width: 650px;
      }

      .item.open .content {
        position: absolute;
        height: 50%;
        width: 100%;
        background-color: rgb(195, 255, 0);
        top: 0;
        display: block;
      }
      .item .content .title {
        display: flex;
        flex-wrap: nowrap;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 22px;
        color: #000000;
        line-height: 60px;
      }
      .item .content .title .icon {
        width: 60px;
        height: 60px;
        background: #ffffff;
        border-radius: 50%;
        margin-right: 14px;
      }
      .item .content .describe {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        margin-top: 38px;
      }

      /* 鼠标悬停效果 */
      .item:hover {
        background-color: #ddd;
      }
      /* 项目没被点击时的默认样式 */
      .item.open .default {
        display: none;
      }
      .item .default {
        position: absolute;
        height: 30%;
        width: 100%;
        background-color: red;
        display: grid;
        place-items: center;
        top: 0;
      }
      .item .default .icon {
        width: 60px;
        height: 60px;
        background: #ffffff;
        border-radius: 50%;
      }
      .item .default .text {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 22px;
        color: #ffffff;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item-1 open">
        <div class="default">
          <div class="icon"></div>
          <div class="text">Item 1</div>
        </div>
        <div class="content">
          <div class="title">
            <div class="icon"></div>
            <span>Item 1</span>
          </div>
          <div class="describe">这是很长的描述1</div>
        </div>
      </div>
      <div class="item item-2">
        <div class="default">
          <div class="icon"></div>
          <div class="text">Item 2</div>
        </div>
        <div class="content">
          <div class="title"></div>
          <div class="describe">这是很长的描述2</div>
        </div>
      </div>
      <div class="item item-3">
        <div class="default">
          <div class="icon"></div>
          <div class="text">Item 3</div>
        </div>
        <div class="content">
          <div class="title"></div>
          <div class="describe">这是很长的描述3</div>
        </div>
      </div>
      <div class="item item-4">
        <div class="default">
          <div class="icon"></div>
          <div class="text">Item 4</div>
        </div>
        <div class="content">
          <div class="title"></div>
          <div class="describe">这是很长的描述4</div>
        </div>
      </div>
      <div class="item item-5">
        <div class="default">
          <div class="icon"></div>
          <div class="text">Item 5</div>
        </div>
        <div class="content">
          <div class="title"></div>
          <div class="describe">这是很长的描述5</div>
        </div>
      </div>
    </div>

    <script>
      document.querySelectorAll(".item").forEach((item) => {
        item.addEventListener("click", () => {
          // 先折叠所有项
          document.querySelectorAll(".item").forEach((i) => {
            i.classList.remove("open");
          });

          // 当前点击的项展开
          item.classList.add("open");
        });
      });
    </script>
  </body>
</html>