归档页Read More按钮功能修复：仅隐藏当前文章摘要

问题原因 #

你当前的jQuery代码使用了全局选择器$('.entry-excerpt')和$('.news-content')，点击按钮时会匹配页面上所有符合条件的元素，导致所有文章的摘要都被隐藏。要实现仅操作当前按钮所在的文章，必须基于点击元素的上下文来定位目标DOM节点。

修复步骤 #

1. 优化HTML按钮（可选） #

移除按钮的javascript:read_fun()跳转，因为已经通过jQuery绑定了点击事件，避免冗余：

<div class="read-more-div"><a class="read-more-btn" href="#"> Read more + </a></div>

2. 修正jQuery逻辑 #

通过DOM遍历方法，从点击的按钮容器出发，精准定位到当前文章内的摘要和完整内容：

jQuery(document).ready(function($) {
    $('.read-more-div').click(function(e) {
        // 阻止a标签默认跳转行为（如果保留href="#"）
        e.preventDefault();
        // 获取当前点击的按钮容器
        var $currentBtn = $(this);
        // 找到当前按钮所在的文章内容容器
        var $currentArticle = $currentBtn.closest('.article-content');
        // 仅隐藏当前文章的摘要，显示完整内容
        $currentArticle.find('.entry-excerpt').hide();
        $currentArticle.find('.news-content').show();
        // 移除当前按钮
        $currentBtn.remove();
    });
});

关键说明 #

• closest('.article-content')：从点击元素向上查找最近的.article-content父容器，确保操作范围限定在当前文章内。
• find()：在父容器内查找目标元素，避免影响页面上的其他文章。
• e.preventDefault()：如果保留了a标签的href="#"，必须阻止默认的页面锚点跳转行为。

修改后，点击任意文章的Read More按钮，只会对该文章的摘要和完整内容进行切换，不会干扰其他文章。

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