使用 jQuery 实现带图片的 CSS 手风琴菜单-html教程-PHP中文网

使用 jQuery 实现带图片的 CSS 手风琴菜单

碧海醫心

发布： 2025-11-03 12:49:00

原创

685人浏览过

使用 jquery 实现带图片的 css 手风琴菜单

本文将指导你如何使用 jQuery 和 CSS 创建一个带有图片的动态手风琴菜单。通过简洁的 HTML 结构、优雅的 CSS 样式和灵活的 jQuery 脚本，你可以轻松地实现图片的展开和折叠效果，提升用户界面的交互体验。

手风琴菜单实现步骤

1. HTML 结构

首先，我们需要构建 HTML 结构。手风琴菜单的基本结构包括一个容器 div.accordion，以及多个手风琴项 div.accordion-section。每个手风琴项包含一个标题 a.accordion-section-title 和一个内容区域 div.accordion-section-content。标题部分包含图片，点击后会展开或折叠对应的内容区域。

<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">
      <img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
    </a>
    <div id="accordion-1" class="accordion-section-content">
      <p>This is first accordion section</p>
    </div>
  </div>
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-2">
      <img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
    </a>
    <div id="accordion-2" class="accordion-section-content">
      <p> this is second accordian section</p>
    </div>
  </div>
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-3">
      <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
    </a>
    <div id="accordion-3" class="accordion-section-content">
      <p> this is third accordian section</p>
    </div>
  </div>
</div>

登录后复制

2. CSS 样式

接下来，我们需要定义 CSS 样式来美化手风琴菜单。包括设置容器的样式、标题的样式以及内容区域的样式。

.accordion {
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  background: transparent;
  border-bottom: 1px solid #1a1a1a;
  font-size: 1.2em;
  color: #fff;
  transition: all linear 0.5s;
  text-decoration: none;
}

.accordion-section-title.active {
  background-color: #4c4c4c;
  text-decoration: none;
}

.accordion-section-title:hover {
  background-color: grey;
  text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

.accordion-section-content {
  padding: 15px;
  display: none;
  color: white;
}

.accordion-section {
  background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}

登录后复制

3. jQuery 交互

最后，我们需要使用 jQuery 来实现点击标题展开/折叠内容区域的交互效果。

立即学习“前端免费学习笔记（深入）”；

吉卜力风格图片在线生成

将图片转换为吉卜力艺术风格的作品

121

查看详情

$('.accordion-section-title').click(function(e) {
  var currentAttrvalue = $(this).attr('href');

  if ($(e.target).is('.active')) {
    $(this).removeClass('active');
    $('.accordion-section-content:visible').slideUp(300);

  } else {
    $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
    $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
  }
});

登录后复制

这段代码首先监听 .accordion-section-title 的点击事件。当点击标题时，它会检查当前标题是否已经处于激活状态（即已经展开）。如果已经展开，则折叠内容区域，并移除标题的 active 类。如果未展开，则先折叠所有已展开的内容区域，移除所有标题的 active 类，然后展开当前点击标题对应的内容区域，并为当前标题添加 active 类。slideUp() 和 slideDown() 函数用于实现平滑的展开和折叠动画效果。

注意事项：

确保引入 jQuery 库。
href 属性的值需要和内容区域的 id 属性值对应，这样才能正确地展开/折叠对应的内容区域。
可以根据需要调整 CSS 样式和 jQuery 代码，以实现更个性化的效果。

4. 完整代码示例

将上述 HTML、CSS 和 jQuery 代码整合在一起，就是一个完整的带图片的手风琴菜单示例。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Accordion Menu with Pictures</title>
<style>
.accordion {
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  background: transparent;
  border-bottom: 1px solid #1a1a1a;
  font-size: 1.2em;
  color: #fff;
  transition: all linear 0.5s;
  text-decoration: none;
}

.accordion-section-title.active {
  background-color: #4c4c4c;
  text-decoration: none;
}

.accordion-section-title:hover {
  background-color: grey;
  text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

.accordion-section-content {
  padding: 15px;
  display: none;
  color: white;
}

.accordion-section {
  background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
</style>
</head>
<body>

<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">
      <img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
    </a>
    <div id="accordion-1" class="accordion-section-content">
      <p>This is first accordion section</p>
    </div>
  </div>
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-2">
      <img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
    </a>
    <div id="accordion-2" class="accordion-section-content">
      <p> this is second accordian section</p>
    </div>
  </div>
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-3">
      <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
    </a>
    <div id="accordion-3" class="accordion-section-content">
      <p> this is third accordian section</p>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.accordion-section-title').click(function(e) {
  var currentAttrvalue = $(this).attr('href');

  if ($(e.target).is('.active')) {
    $(this).removeClass('active');
    $('.accordion-section-content:visible').slideUp(300);

  } else {
    $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
    $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
  }
});
</script>

</body>
</html>

登录后复制

通过以上步骤，你就可以成功创建一个带有图片的 CSS 手风琴菜单。你可以根据自己的需求修改 HTML 结构、CSS 样式和 jQuery 代码，以实现更丰富的功能和更美观的效果。

以上就是使用 jQuery 实现带图片的 CSS 手风琴菜单的详细内容，更多请关注php中文网其它相关文章！