jQuery切换列表中图片src（加减图标）异常问题求助

问题说明 #

我是jQuery新手，制作了一个每次仅展开一项的可切换列表，展开/收起功能正常，但切换加减图标时遇到两个问题：

• 点击时所有图标都变为减号，而非仅当前展开项的图标变化
• 收起项的图标不会变回加号

问题原因 #

1. 原代码中$(this).next(".toggle-img")逻辑错误：.toggle-img是.toggle的子元素，不是同级的next元素，无法定位到当前点击项的图标
2. 缺少对当前点击项图标状态的判断逻辑，只处理了其他图标的重置，没根据内容的展开/收起状态切换当前图标

修复后的代码 #

jQuery代码 #

$(document).ready(function(){
    // 初始隐藏所有内容
    $(".toggle-content").hide();

    // 默认展开第一个内容，同时切换对应图标为减号
    const firstContent = $(".toggle-content").first();
    firstContent.show(100);
    firstContent.prev(".toggle").find(".toggle-img").attr("src","https://i.imgur.com/k3mb7xV.png");

    // 点击切换事件
    $(".toggle").click(function(){
        const $currentToggle = $(this);
        const $currentContent = $currentToggle.next(".toggle-content");
        
        // 切换当前内容的展开/收起
        $currentContent.slideToggle(400, function(){
            // 动画完成后根据内容状态切换当前图标
            const isVisible = $(this).is(":visible");
            $currentToggle.find(".toggle-img").attr("src", isVisible ? "https://i.imgur.com/k3mb7xV.png" : "https://i.imgur.com/BhbAvx0.png");
        });

        // 收起其他所有内容，并将对应图标设为加号
        $(".toggle-content").not($currentContent).slideUp(400, function(){
            $(this).prev(".toggle").find(".toggle-img").attr("src","https://i.imgur.com/BhbAvx0.png");
        });
    });
});

HTML代码（无需修改） #

<div class="toggle"><img class="toggle-img" src="https://i.imgur.com/BhbAvx0.png" style="margin-right:5px; position:relative; top:8px" /> Link 1</div>
<div class="toggle-content">Content 1</div>

<div class="toggle"><img class="toggle-img" src="https://i.imgur.com/BhbAvx0.png" style="margin-right:5px; position:relative; top:8px" /> Link 2</div>
<div class="toggle-content">Content 2</div>

<div class="toggle"><img class="toggle-img" src="https://i.imgur.com/BhbAvx0.png" style="margin-right:5px; position:relative; top:8px" /> Link 3</div>
<div class="toggle-content">Content 3</div>

关键改动说明 #

• 用$currentToggle.find(".toggle-img")定位当前点击项内的图标，替代原错误的next方法
• 在slideToggle的回调函数中判断内容的可见状态，动态切换当前图标
• 收起其他内容时，通过prev(".toggle").find(".toggle-img")找到对应项的图标并重置为加号
• 初始化时主动将第一个展开项的图标设为减号，保持状态一致

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