html怎么实现点击按钮出现评论框，再次点击后隐藏

在HTML中，你可以结合CSS和JavaScript来实现这个动态评论框的显示与隐藏效果。这里是一个简单的例子：

首先，创建一个按钮和一个隐藏的评论框：

<button id="commentBtn">展开评论</button>
<div id="commentBox" style="display:none;">
  <!-- 添加评论输入区域 -->
  <textarea id="commentInput"></textarea>
  <!-- 添加提交按钮 -->
  <button id="submitBtn">提交</button>
</div>

然后，添加一些基础的CSS用于隐藏评论框：

#commentBox {
  display: none; /* 隐藏初始状态 */
}

接下来，使用JavaScript控制按钮的行为：

document.getElementById('commentBtn').addEventListener('click', function() {
  // 点击事件触发，显示评论框
  document.getElementById('commentBox').style.display = 'block';
});

document.getElementById('commentBox').addEventListener('click', function(event) {
  // 检查是否点击了评论框外部或提交按钮，如果是，则隐藏评论框
  if (event.target !== this && event.target.id !== 'submitBtn') {
    document.getElementById('commentBox').style.display = 'none';
  }
});

上面的代码首先给按钮绑定了点击事件，当点击时，评论框显示出来。同时，还给评论框绑定了点击事件，如果点击的是评论框以外的地方或者是提交按钮，评论框就会再次隐藏。