点击#test_001/#test_002关闭内容时read more按钮仍显示read less如何修复

问题根源 #

你当前为#test_001、#test_002绑定的点击事件中，仅实现了内容区域的显隐切换和页面滚动，没有同步修改对应read more按钮的文本状态，所以会出现内容折叠后按钮仍显示"Read less"的问题。

修改方案 #

方案1：最小改动，不调整原有代码结构 #

仅需要给两个内容区域的点击事件，各新增一行同步按钮文本的代码即可：

$("#readmore_01").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }
 });

$("#readmore_02").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }
 });

$("#test_001").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);
    // 新增这行同步按钮状态
    $("#readmore_01").html("Read more");
 });

$("#test_002").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);
    // 新增这行同步按钮状态
    $("#readmore_02").html("Read more");
 });

HTML代码无需修改。

方案2：优化冗余逻辑，通用适配后续新增模块 #

可以把重复绑定的事件合并为通用逻辑，后续新增同类模块只要保持ID命名规则一致，无需额外写JS代码：

// 所有read more按钮通用点击事件
$("[id^='readmore_']").click(function(e){
    e.preventDefault();
    const num = $(this).attr("id").split("_")[1];
    const contentId = `#test_00${num}`;
    const scrollPos = num === "01" ? 170 : 550;
    $(contentId).toggle("fast");
    window.scrollTo(scrollPos, scrollPos);
    // 切换按钮文本
    $(this).html($(this).html() === "Read less" ? "Read more" : "Read less");
});

// 所有展开内容通用点击事件
$("[id^='test_00']").click(function(e){
    e.preventDefault();
    const num = $(this).attr("id").split("00")[1];
    const btnId = `#readmore_${num}`;
    const scrollPos = num === "1" ? 170 : 550;
    $(this).toggle("fast");
    window.scrollTo(scrollPos, scrollPos);
    // 同步修改按钮文本
    $(btnId).html("Read more");
});

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