点击切换子菜单与图片，实现单一菜单展开功能技术问询

当然可以实现这个需求！我们只需要调整jQuery逻辑，确保每次点击新菜单时，先收起所有已展开的子菜单并隐藏所有图片，再展开当前菜单并显示对应图片，这样就能保证同一时间只有一个菜单处于展开状态。

核心改动点： #

• 合并重复的$(document).ready回调，避免代码冗余
• 在点击菜单时，先收起所有子菜单并隐藏所有图片，再处理当前菜单的展开和对应图片的显示
• 修正图片匹配逻辑（原代码中多个图片使用了相同的id，不符合HTML规范，改用data-id来关联更合理）
• 统一绑定点击事件，避免重复绑定导致的逻辑冲突

完整代码示例： #

HTML

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

<ul class="menu">
  <li class='sub-menu'>
    <a href='#' class="exposition" data-id="divId1">1</a>
    <ul>
      <li>1 opening (will close 2 if open and hide its images)</li>
    </ul>
  </li>
  <li class='sub-menu'>
    <a href='#' class="exposition" data-id="divId2">2</a>
    <ul>
      <li>2 opening (will close 1 if open and hide its images)</li>
    </ul>
  </li>
</ul>

<div class="exposition-container">
  <div class="photos-ind"><img class="photos-evenements" src="http://follebeton.com/img/Performances%20OK.jpg" data-id="divId1"/></div>
  <div class="photos-ind"><img class="photos-evenements" src="http://follebeton.com/img/333_3.png" data-id="divId1"/></div>
  <div class="photos-ind"><img class="photos-evenements" src="http://follebeton.com/img/333_1.png" data-id="divId1"/></div>
  
  <div class="photos-ind"><img class="photos-evenements" src="http://follebeton.com/img/FESTIVAL_JEUNE_VIDEO_1.png" data-id="divId2"/></div>
  <div class="photos-ind"><img class="photos-evenements" src="http://follebeton.com/img/FESTIVAL_JEUNE_VIDEO_4.png" data-id="divId2"/></div>
</div>

CSS

.photos-evenements{
  display:none;
  max-width: 100%;
  max-height: 90vh;
}

.sub-menu ul {
  display: none; /* 初始隐藏所有子菜单 */
}

jQuery

$(document).ready(function(){
  // 绑定菜单点击事件
  $('.exposition').on('click', function(e){
    e.preventDefault(); // 阻止默认跳转行为
    
    const targetId = $(this).data('id');
    
    // 1. 收起所有子菜单
    $('.sub-menu ul').slideUp(200);
    // 2. 隐藏所有图片
    $('.photos-evenements').hide();
    
    // 3. 展开当前菜单的子菜单
    $(this).closest('.sub-menu').find('ul').slideToggle(200);
    // 4. 显示对应data-id的图片
    $(`.photos-evenements[data-id="${targetId}"]`).show();
  });
});

代码说明： #

1. 全局重置状态：每次点击菜单时，先通过slideUp收起所有子菜单、hide隐藏所有图片，确保界面回到“初始干净”的状态
2. 精准匹配内容：用data-id替代重复的id来关联菜单和图片，既符合HTML规范，又能准确找到对应内容
3. 简洁逻辑整合：把所有交互逻辑放在一个$(document).ready回调里，避免重复绑定事件，代码更易维护

这样修改后，点击任意菜单时，之前展开的菜单会自动收起、对应图片隐藏，同时当前菜单展开并显示匹配的图片，完全满足你的需求。

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