Laravel 8评论系统：点击回复按钮控制回复表单显示/隐藏功能异常求助

看起来你遇到的问题主要有几个核心原因：初始状态表单未隐藏、点击逻辑的判断条件没考虑元素初始样式值，还有按钮ID重复的潜在问题，我一步步帮你修复：

问题诊断 #

1. 表单默认显示：回复表单在页面加载时没有设置隐藏属性，所以一开始就会展示出来。
2. 点击逻辑异常：元素初始的style.display属性是空字符串（不是"none"），第一次点击时x.style.display === "none"不成立，会执行隐藏逻辑；第二次点击时style.display已经是"none"，才会切换为显示。
3. 重复ID问题：循环里的按钮都用了id="reply-button"，HTML中ID必须唯一，这可能导致后续其他JS逻辑出问题。

修复方案 #

1. 让回复表单默认隐藏 #

给回复textarea添加初始隐藏样式，或者用CSS类控制：

<!-- 方式1：直接加行内样式 -->
<textarea id="reply-form-{{$comment->id}}" cols="80" rows="2" class="form-control mb-10" name="replyMessage" style="display: none;"></textarea>

<!-- 方式2：用CSS类（更推荐） -->
<textarea id="reply-form-{{$comment->id}}" cols="80" rows="2" class="form-control mb-10 hidden" name="replyMessage"></textarea>

如果用CSS类，需要在样式文件或<style>标签里添加：

.hidden {
    display: none;
}

2. 修正JS的显示切换逻辑 #

优化判断逻辑，或者用更简洁的classList.toggle方法，同时修正函数参数不匹配的问题（你调用时传了两个参数，但函数只接收了一个）：

// 方式1：优化判断逻辑
function showReplyForm(commentId, userName){
    var x = document.getElementById(`reply-form-${commentId}`);
    // 覆盖初始空值的情况
    if (x.style.display === "none" || x.style.display === "") {
        x.style.display = "block";
        // 可选：自动填充@用户名到回复框
        // x.value = `@${userName} `;
    } else {
        x.style.display = "none";
    }
}

// 方式2：用CSS类切换（更简洁优雅）
function showReplyForm(commentId, userName){
    var x = document.getElementById(`reply-form-${commentId}`);
    x.classList.toggle('hidden');
    // 可选：显示时自动填充用户名并聚焦
    // if (!x.classList.contains('hidden')) {
    //     x.value = `@${userName} `;
    //     x.focus();
    // }
}

3. 修复重复ID问题 #

把按钮的ID改成动态唯一的，避免HTML语法错误：

<button id="reply-button-{{$comment->id}}" onclick="showReplyForm('{{$comment->id}}', '{{ $comment->user->name }}')" class="border-0 bg-transparent">Reply</button>

完整修改后的代码示例 #

HTML部分 #

<div class="card-body">
@if ($PostDetails->comment)
@foreach($PostDetails->comment as $comment)
<blockquote class="blockquote">
<p class="mb-0">{{ $comment->comment }}</p>
<footer class="blockquote-footer">{{ $comment->user->name }}</footer>
</blockquote>
{{-- Reply Comment Section --}}
<button id="reply-button-{{$comment->id}}" onclick="showReplyForm('{{$comment->id}}', '{{ $comment->user->name }}')" class="border-0 bg-transparent">Reply</button>
<div class="row flex-row d-flex">
<form action="" method="post">
<div class="col-lg-12">
<textarea id="reply-form-{{$comment->id}}" cols="80" rows="2" class="form-control mb-10 hidden" name="replyMessage"></textarea>
</div>
</form>
</div>
<hr>
@endforeach
@endif
</div>

CSS部分 #

.hidden {
    display: none;
}

JS部分 #

<script type="text/javascript">
function showReplyForm(commentId, userName){
    var x = document.getElementById(`reply-form-${commentId}`);
    x.classList.toggle('hidden');
    // 可选功能：显示回复框时自动填充用户名并聚焦
    if (!x.classList.contains('hidden')) {
        x.value = `@${userName} `;
        x.focus();
    }
}
</script>

这样修改后，表单会默认隐藏，点击回复按钮第一次就能正常显示，第二次点击隐藏，同时解决了ID重复的潜在问题，还能添加自动填充用户名的友好功能~

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