使用 jQuery 创建带有图片的 CSS 手风琴菜单

<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>

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

.accordion-section-title {
  width: 100%;
  padding: 15px;
}

.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');
}

$(document).ready(function() {
  $('.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);
    }

    e.preventDefault(); // 阻止默认链接行为
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>