切换类时背景图未消失，Read More按钮图标切换异常求助

看起来你遇到的问题是Read More按钮切换状态时，其中一个图标始终显示、没法被隐藏对吧？这种情况我碰到过好几次，大概率是CSS选择器优先级不足或者类切换的逻辑没覆盖到所有元素导致的。下面给你一步步梳理解决方案：

第一步：补全合理的HTML结构 #

首先得确保按钮里包含两个切换用的图标，结构大概是这样（你可以根据实际图标路径调整）：

<div class="read-more more">
  <button class="read-more_button">
    Read more
    <img src="icon-down.svg" alt="展开" class="read-more_icon read-more_icon--down">
    <img src="icon-up.svg" alt="收起" class="read-more_icon read-more_icon--up">
  </button>
</div>
<!-- 对应要展开/收起的内容区域 -->
<div class="read-more_content">
  这里是点击Read More后要显示的内容...
</div>

第二步：编写正确的CSS样式 #

核心思路是通过父容器的more/less类来控制两个图标的显示状态，一定要确保选择器优先级足够，避免被其他样式覆盖：

/* 默认收起状态：显示向下图标，隐藏向上图标 */
.read-more.more .read-more_icon--up {
  display: none;
}
/* 展开状态：显示向上图标，隐藏向下图标 */
.read-more.less .read-more_icon--down {
  display: none;
}
/* 可选：内容区域默认隐藏，展开时显示 */
.read-more_content {
  display: none;
  margin-top: 10px;
}
.read-more.less + .read-more_content {
  display: block;
}

第三步：修正jQuery的切换逻辑 #

要确保类切换作用在父容器上，并且按钮文本和图标状态完全同步：

$(document).ready(function() {
  $('.read-more_button').on('click', function() {
    // 找到父级的read-more容器，避免影响其他同类型按钮
    const $readMoreContainer = $(this).closest('.read-more');
    
    // 切换more和less类
    $readMoreContainer.toggleClass('more less');
    
    // 根据容器的类切换按钮文本
    if ($readMoreContainer.hasClass('less')) {
      $(this).text('Read less');
    } else {
      $(this).text('Read more');
    }
    
    // 同步切换内容区域的显示状态（如果需要的话）
    $(this).closest('.read-more').next('.read-more_content').toggle();
  });
});

排查常见坑点 #

如果做完上面的步骤还是有一个图标显示，你可以检查这几点：

• 打开浏览器开发者工具（F12），选中无法隐藏的图标，看看它的display属性是不是被其他更高优先级的样式（比如带!important的）强制覆盖了
• 确认父容器的more/less类确实在点击时被正确切换了（可以在Elements面板里实时查看类的变化）
• 检查图标元素的类名有没有写错，确保CSS选择器能精准匹配到它们

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