WordPress网站Read More功能异常：需点击两次才生效求助

我实现的网站Read More功能存在异常，必须点击两次按钮才能正常工作。该功能通过检测后台文本字段中的WordPress Read More标签，将文本拆分为两部分，当前问题是初始状态下内容无法正常折叠，求排查方向。

相关代码 #

PHP代码 #

<?php 
    if(get_field('property_description')){
        $highlights = get_field('property_description');
        if(strpos($highlights, '<!--more-->') !== false) {
            $start = strstr($highlights, '<!--more-->', true);
            $end = strstr($highlights, '<!--more-->');
            echo "<div class='exsec'>".$start."</div>";
            echo "<div class='fullsec'>".$end."</div><div class='btnRM'><a href=''>READ MORE</a></div>";
        } else {
            echo $highlights;
        }
}?>

JavaScript代码 #

jQuery('.btnRM a').click(function(e){
    e.preventDefault();
    if(jQuery(this).text()=="READ MORE"){
        jQuery(this).parent().prev('.fullsec').fadeIn();    
        jQuery(this).text('LESS');
    } else {
        jQuery(this).parent().prev('.fullsec').fadeOut();
        jQuery(this).text('READ MORE'); 
    }
    
});

排查方向建议 #

• 检查fullsec类的初始CSS状态：当前代码中fullsec默认是显示状态，第一次点击执行fadeIn()不会有视觉变化，第二次点击才触发fadeOut()。需给fullsec添加初始隐藏样式：

.fullsec {
    display: none;
}

• 验证按钮文本匹配准确性：检查渲染后的按钮文本是否存在多余空格，导致jQuery(this).text()=="READ MORE"判断失效。可通过trim()处理文本：

if(jQuery(this).text().trim()=="READ MORE"){

• 确认jQuery事件绑定时机：如果页面内容是动态加载的，需确保事件绑定在元素生成之后，或改用事件委托：

jQuery(document).on('click', '.btnRM a', function(e){
    // 原逻辑代码
});

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