首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我做了一个手风琴,但是我想让我的加号图标平滑地转换成减号图标,怎么用jQuery实现呢?

要实现手风琴效果,并且在展开时将加号图标平滑转换为减号图标,你可以使用jQuery来操作DOM元素的类和样式。以下是一个简单的示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴效果</title>
<style>
  .accordion {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
  }
  .accordion-item {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
  }
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .accordion-content.active {
    max-height: 500px; /* 根据内容调整 */
  }
  .icon {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
  }
  .icon.active {
    transform: rotate(45deg);
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>标题1</h3>
      <span class="icon">+</span>
    </div>
    <div class="accordion-content">
      内容1...
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>标题2</h3>
      <span class="icon">+</span>
    </div>
    <div class="accordion-content">
      内容2...
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  $('.accordion-header').click(function() {
    var content = $(this).next('.accordion-content');
    var icon = $(this).find('.icon');

    if (content.hasClass('active')) {
      content.removeClass('active');
      icon.removeClass('active');
    } else {
      $('.accordion-content').removeClass('active');
      $('.icon').removeClass('active');
      content.addClass('active');
      icon.addClass('active');
    }
  });
});
</script>

</body>
</html>

解释

  1. HTML结构
    • accordion:手风琴容器。
    • accordion-item:每个手风琴项。
    • accordion-header:手风琴项的标题部分,包含加号图标。
    • accordion-content:手风琴项的内容部分。
  • CSS样式
    • accordion-content:默认情况下,内容部分的最大高度为0,隐藏内容。
    • active类:当内容展开时,添加active类,设置最大高度,使内容显示。
    • icon:图标默认旋转角度为0度。
    • icon.active:当图标需要转换为减号时,添加active类,旋转45度。
  • jQuery脚本
    • 当点击accordion-header时,检查内容部分是否已经有active类。
    • 如果有,则移除active类,隐藏内容,并将图标旋转回0度。
    • 如果没有,则移除所有内容部分的active类,隐藏所有内容,然后将当前点击的内容部分添加active类,显示内容,并将图标旋转45度。

应用场景

这个手风琴效果适用于需要折叠和展开内容的页面,例如:

  • FAQ页面
  • 设置页面
  • 产品详情页

参考链接

通过这种方式,你可以实现一个简单且平滑的手风琴效果,并且在展开和折叠时动态改变图标。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券