我已经有一段时间没有使用HTML/Javascript了，所以我对如何处理这个问题有点困惑。
我正在使用Flask构建一个reddit-y克隆。 我正处于我可以向任何评论添加子评论并让内容显示良好的地步，但是当我进行测试时，我只是让回复文本框/提交按钮始终对每条评论可见，我想尝试模拟实际的 reddit 行为，其中有一些文本说"回复"，单击它时会出现一个文本框。
这是我当前的 HTML，它为每个评论显示一个文本框/提交按钮。 我如何使用jQuery(甚至vanilla JS)来使其只有在单击其他文本时才能显示reply？
<ul>
{%- for comment in comments recursive %}
<li>
{{ comment.commentContent }}
<form action="{{ url_for('blog.addComment', postId=post['id'], redirectHere=True, parentComment=comment['id'])}}" method="post">
<textarea name="comment"></textarea>
<input type="submit">
</form>
{%- if comment.children_comments -%}
<ul>{{ loop(comment.children_comments) }}</ul>
{%- endif %}
</li>
{%- endfor %}
</ul>
我被夹在两个思想之间。 我是否应该为每个评论最初设置为不可见，然后单击reply后会使文本区域/表单可见？ 还是等待有人点击reply然后动态使用 jQuery 将表单附加到 HTML 中会更好？
最好的办法是使用 boostraps 折叠选项来隐藏和显示评论文本框。 下面的代码向您展示了它是如何工作的
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Hide and show comment box</button>
<div id="demo" class="collapse">
comment box appears here
</div>
</div>
</body>
</html>
现在要将其应用于您的代码以显示和隐藏注释框， 我需要使用您的评论 ID，以使每个按钮评论单击唯一。 如果您将注释 ID 设为{{ comment.commentid }}则将其传递给演示 ID和数据目标参数
因此，使用bootsraps和jquery文件，您的代码将如下所示
<ul>
{%- for comment in comments recursive %}
<li>
{{ comment.commentContent }}
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo{{ comment.commentid }}">Hide and show comment box</button>
<div id="demo{{ comment.commentid }}" class="collapse">
<form action="{{ url_for('blog.addComment', postId=post['id'], redirectHere=True, parentComment=comment['id'])}}" method="post">
<textarea name="comment"></textarea>
<input type="submit">
</form>
</div>
{%- if comment.children_comments -%}
<ul>{{ loop(comment.children_comments) }}</ul>
{%- endif %}
</li>
{%- endfor %}
</ul>