点击按钮切换WordPress评论表单的显示与隐藏

嗨，我来帮你搞定这个评论表单的切换问题～你现在的代码只能展开不能收起，核心是要给按钮加上切换逻辑，而不是只做单向的显示操作。下面是完整的可行方案：

第一步：保留你的HTML结构（可优化按钮文本交互） #

你的原有HTML结构没问题，我们可以保留，同时后续通过JS来控制按钮文本的切换，提升用户体验：

<a href="#" id="Leave_a_comment">Click here to leave a Comment</a>
<div id="comment_form_wrapper" style="display: none;">
    <?php comments_template( '', true ); ?>
</div>

第二步：添加切换逻辑的JavaScript代码 #

因为WordPress默认已经加载了jQuery，我们直接用它来实现切换功能，核心是用toggle()方法自动判断表单的显示状态并切换，同时阻止a标签的默认跳转行为：

<script type="text/javascript">
jQuery(document).ready(function($) {
    // 绑定按钮的点击事件
    $('#Leave_a_comment').on('click', function(e) {
        // 阻止a标签默认的跳转（避免点击后跳转到页面顶部）
        e.preventDefault();
        // 切换评论表单的显示/隐藏状态
        $('#comment_form_wrapper').toggle();
        
        // 可选：根据表单状态切换按钮文本，让操作更清晰
        if ($('#comment_form_wrapper').is(':visible')) {
            $(this).text('Hide Comment Form');
        } else {
            $(this).text('Click here to leave a Comment');
        }
    });
});
</script>

关键知识点说明 #

• toggle()方法：jQuery自带的方法，会自动检测目标元素当前是显示还是隐藏，然后切换为相反状态，完美解决你只能展开不能收起的问题
• e.preventDefault()：必须加，否则点击a标签（href="#")会触发页面跳转到顶部的默认行为，影响体验
• 按钮文本切换是可选的，如果不需要可以删掉那部分判断代码，只保留toggle()即可

如果想要极简版（仅保留显示隐藏，不切换文本），可以用这段简化代码：

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#Leave_a_comment').on('click', function(e) {
        e.preventDefault();
        $('#comment_form_wrapper').toggle();
    });
});
</script>

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