本文详解如何使用 jQuery 精准控制 WordPress 归档页中每篇文章的“Read More”交互行为，避免全局操作导致所有摘要被误隐藏，确保点击仅影响当前文章区块内的 .entry-excerpt 和 .news-content。

本文详解如何使用 jquery 精准控制 wordpress 归档页中每篇文章的“read more”交互行为，避免全局操作导致所有摘要被误隐藏，确保点击仅影响当前文章区块内的 `.entry-excerpt` 和 `.news-content`。

在 WordPress 主题开发中，常需在归档页（如首页、分类页）为每篇文章展示摘要（the_excerpt()），并提供“Read More”按钮用于展开完整内容（the_content()）。但初学者易犯一个典型错误：使用全局选择器（如 $('.entry-excerpt').hide()）响应点击事件，结果导致页面中所有文章的摘要同时隐藏、所有正文同时显示——这显然违背了用户预期。

根本原因在于 DOM 作用域未限定：.read-more-div 的点击事件未与当前文章容器（即 @#@#@#@#@#@#@#@#@#@0 仍可跳转到单篇页，保障基础可用性。

Wordpress OAuth

启动并完成 WordPress.com OAuth 认证，通过 REST API 发布文章。适用于需要生成授权链接、交换授权码等场景。

下载

通过以上改进，你将获得一个精准、健壮、可访问且易于维护的“展开/收起”交互方案——每次点击只影响所属文章，真正实现“所见即所得”的用户体验。

jQuery(document).ready(function($) {
    $('.read-more-div').on('click', function(e) {
        e.preventDefault(); // 阻止默认跳转（尤其当 href="javascript:..." 时更稳妥）
        var $trigger = $(this);
        var $container = $trigger.closest('.article-content'); // 向上找到最近的 article 内容容器（更健壮于 .parent()）

        $container.find('.entry-excerpt').hide();
        $container.find('.news-content').show();
        $trigger.remove(); // 移除已点击的按钮
    });
});

<div class="read-more-div">
    <button type="button" class="read-more-btn" aria-expanded="false" aria-controls="content-<?php the_ID(); ?>">
        Read more +
    </button>
</div>
<!-- 对应内容区添加 ID 以便 ARIA 关联 -->
<div id="content-<?php the_ID(); ?>" class="news-content" aria-hidden="true">
    <?php the_content(); ?>
</div>

$trigger.attr('aria-expanded', 'true');
$container.find('.news-content').attr('aria-hidden', 'false');

$('.page-content').on('click', '.read-more-div', function(e) {
    e.preventDefault();
    var $trigger = $(this);
    var $container = $trigger.closest('.article-content');
    $container.find('.entry-excerpt').hide();
    $container.find('.news-content').show();
    $trigger.remove();
});