如何在Accordion（手风琴组件）展开时显示图片

直接修改代码，给每个手风琴面板绑定对应图片地址，点击时同步切换显示的图片，完整代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
.question {
    color: #555;
    padding: 15px;
    font-weight: 700;
    font-size: 16px;
    border: 1px solid #ccc;
    background: #efefef;
}
.question:hover {
    cursor: pointer;
}
.answer {
    color: #777;
    padding: 15px;
    font-weight: 400;
    font-size: 13px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>
<div id="faq_slide">
  <!-- 给每个question添加data-img-src属性，存对应图片地址 -->
  <div class="question" data-img-src="https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg">First Question</div>
  <div class="answer">Lorem ipsum dolor sit amet.</div>
  <div class="question" data-img-src="https://example.com/second-image.jpg">Second Question</div>
  <div class="answer">Lorem ipsum dolor sit amet.</div>
  <div class="question" data-img-src="https://example.com/third-image.jpg">Third Question</div>
  <div class="answer">Lorem ipsum dolor sit amet.</div>
</div>
<img id="myImgaa" src="" width="107" height="98">
<script>
const $img = $('#myImgaa');
$("#faq_slide .answer").not(":first").hide();

// 初始化：第一个面板默认展开，设置对应图片
$img.attr('src', $('#faq_slide .question:first').data('img-src'));

$("#faq_slide .question").click(function () {
    const $answer = $(this).next(".answer");
    const isVisible = $answer.is(":visible");
    
    if (isVisible) {
        $answer.slideUp(300);
        $img.attr('src', ''); // 收起时清空图片
    } else {
        $answer.slideDown(300).siblings(".answer").slideUp(300);
        // 展开时设置对应图片
        $img.attr('src', $(this).data('img-src'));
    }
});
</script>

关键改动说明： #

• 给每个.question标签添加data-img-src属性，直接存储对应面板展开时要显示的图片地址，方便后续获取
• 移除原本无用的myFunction，把图片切换逻辑直接整合到手风琴的点击事件里，逻辑更连贯
• 初始化时自动给默认展开的第一个面板设置对应图片
• 点击时根据面板的展开/收起状态，同步更新图片的src属性：展开时加载对应图片，收起时清空图片

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