求助：使用jQuery实现带图片的CSS手风琴菜单及按钮状态切换

核心修改说明 #

• 原代码重复使用#pic和#pic-innerID（HTML中ID必须唯一），改为class复用样式
• 新增Menu切换按钮，实现点击切换"+"/"-"状态
• 补充手风琴展开/收起逻辑，保留所有图片容器的position:absolute属性

修改后的HTML代码 #

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<body>
  <!-- Menu切换按钮 -->
  <div id="menu-toggle">Menu+</div>

  <div id="pic-wrapper">
    <div class="menu-item img1">            
      <img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" class="pic">
      <img src="https://provact.altervista.org/newct/colonna_sx/home_on.png" class="pic-inner">
      <!-- 手风琴面板内容 -->
      <div class="accordion-panel">
        首页菜单内容
      </div>
    </div>

    <div class="menu-item img2">
      <img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" class="pic">
      <img src="https://provact.altervista.org/newct/colonna_sx/scheda_on.png" class="pic-inner">
      <div class="accordion-panel">
        详情页菜单内容
      </div>
    </div>

    <div class="menu-item img3">
      <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" class="pic">
      <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_on.png" class="pic-inner">
      <div class="accordion-panel">
        更新页菜单内容
      </div>
    </div>
  </div>
</body>

修改后的CSS代码 #

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

#menu-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 8px 15px;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
}

.openmenu{
  position:fixed;  
  margin:0 auto; 
  width:300px; 
  overflow-y:auto;
  overflow-x: hidden;
}

/* 菜单容器保持绝对定位 */
.menu-item {
  position: absolute;
  cursor: pointer;
  width: fit-content;
}

.img1 {
  top: 0px;
  left: 18px;
  z-index: -1;
}

.img2 {
  top: 102px;
  left: 18px;
}

.img3 {
  top: 217px;
  left: 18px;
}

#pic-wrapper{
  margin:2em auto;
  position:absolute;
}

/* 替换ID为class */
.pic{
  -moz-transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -o-transition:all 1s ease-out;
  -ms-transition:all 1s ease-out;
  position:absolute;
  z-index:1;
  opacity:1
}
.pic-inner{
  z-index:0;
  position:absolute;
}
.menu-item:hover .pic{
  opacity:0
}

/* 手风琴面板默认隐藏 */
.accordion-panel {
  position: absolute;
  left: 120px; /* 根据图片宽度调整，避免覆盖图片 */
  top: 0;
  background: rgba(255,255,255,0.9);
  padding: 10px;
  width: 200px;
  display: none;
}

jQuery交互代码 #

$(function() {
  // Menu按钮切换逻辑
  $('#menu-toggle').click(function() {
    var $this = $(this);
    if($this.text() === 'Menu+') {
      $this.text('Menu-');
      $('#pic-wrapper').show();
    } else {
      $this.text('Menu+');
      $('#pic-wrapper').hide();
      $('.accordion-panel').hide();
    }
  });

  // 手风琴展开/收起逻辑
  $('.menu-item').click(function() {
    var $panel = $(this).find('.accordion-panel');
    // 切换当前面板显示状态，隐藏其他面板
    $('.accordion-panel').not($panel).hide();
    $panel.toggle();
  });
});

内容的提问来源于stack exchange，提问作者Prest89