实现WooCommerce单产品描述自动截断及展开/收起功能

你的原代码存在未正确隐藏剩余内容、变量未定义、HTML结构逻辑错误等问题，导致仅截断第一段但后续段落仍显示。以下是修改后的代码，可实现截断第一段前一两句并隐藏所有后续内容的需求：

add_action( 'woocommerce_after_single_product_summary', 'custom_woo_prod_description_toggle' );

function custom_woo_prod_description_toggle() {
    wc_enqueue_js('
        jQuery(document).ready(function($) {
            // 目标容器
            var descContainer = $(".woocommerce-Tabs-panel--description");
            var fullContent = descContainer.html();
            var showChar = 300; // 可调整截断字符数，适配第一段前一两句长度
            
            // 仅当内容长度超过设定值时执行
            if (fullContent.length > showChar) {
                // 截取前showChar个字符，避免截断单词
                var truncatedContent = fullContent.substring(0, showChar);
                truncatedContent = truncatedContent.substring(0, Math.min(truncatedContent.length, truncatedContent.lastIndexOf(" ")));
                // 剩余所有内容（含第一段未显示部分+后续段落）
                var remainingContent = fullContent.substring(truncatedContent.length);
                
                // 构建新的HTML结构
                var newHtml = `
                    <span class="truncated-content">${truncatedContent}…</span>
                    <a href="#" class="read-more-btn">展开更多</a>
                    <div class="hidden-content" style="display:none;">
                        ${remainingContent}
                        <a href="#" class="read-less-btn">收起</a>
                    </div>
                `;
                
                // 替换原内容
                descContainer.html(newHtml);
                
                // 展开按钮事件
                $(".read-more-btn").on("click", function(e) {
                    e.preventDefault();
                    $(this).hide();
                    $(".truncated-content").hide();
                    $(".hidden-content").show();
                });
                
                // 收起按钮事件
                $(".read-less-btn").on("click", function(e) {
                    e.preventDefault();
                    $(".hidden-content").hide();
                    $(".truncated-content").show();
                    $(".read-more-btn").show();
                });
            }
        });
    ');
}

代码说明： #

• 结构优化：将截断内容、展开按钮、隐藏内容（含收起按钮）拆分，确保所有剩余内容（包括第一段未显示部分和后续段落）初始处于隐藏状态
• 截断逻辑：通过lastIndexOf(" ")确保截断位置在单词末尾，避免出现半个单词的混乱显示，可调整showChar数值精准匹配第一段前一两句的长度
• 交互逻辑：点击「展开更多」时隐藏截断内容和展开按钮，显示完整内容与收起按钮；点击「收起」则恢复初始截断状态
• 兼容性：使用jQuery(document).ready确保DOM加载完成后执行，适配WooCommerce的标签页渲染逻辑

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