用jQuery写发布评论框,展开评论折叠评论

好的，以下是一个简单的示例代码：

HTML：

<div class="comments">
  <h3>评论</h3>
  <ul class="comment-list">
    <li>
      <div class="comment-header">
        <span class="comment-author">张三：</span>
        <span class="comment-time">2021-01-01 11:11:11</span>
        <a href="#" class="comment-reply">回复</a>
      </div>
      <div class="comment-content">
        这是一条评论。
      </div>
      <ul class="children">
        <li>
          <div class="comment-header">
            <span class="comment-author">李四：</span>
            <span class="comment-time">2021-01-02 12:12:12</span>
            <a href="#" class="comment-reply">回复</a>
          </div>
          <div class="comment-content">
            这是一条回复。
          </div>
        </li>
      </ul>
    </li>
  </ul>
  <div class="comment-form">
    <textarea class="comment-textarea"></textarea>
    <button class="comment-submit">提交</button>
  </div>
</div>

CSS：

.comments {
  margin-top: 20px;
}

.comment-list {
  list-style: none;
  padding-left: 0;
}

.comment-header {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.comment-author {
  font-weight: bold;
}

.comment-time {
  margin-left: 10px;
}

.children {
  margin-left: 20px;
}

.comment-form {
  margin-top: 20px;
}

.comment-textarea {
  width: 100%;
  height: 80px;
  margin-bottom: 10px;
}

.comment-submit {
  display: block;
  margin: 0 auto;
}

JavaScript：

$(function() {
  // 展开折叠评论
  $('.comments').on('click', '.comment-header', function() {
    $(this).next('.comment-content').slideToggle();
    $(this).next('.children').slideToggle();
  });

  // 回复评论
  $('.comments').on('click', '.comment-reply', function(e) {
    e.preventDefault();
    var $parent = $(this).closest('li');
    var $form = $('.comment-form').clone(true, true);
    $form.addClass('reply-form');
    $form.find('.comment-submit').attr('data-parent', $parent.attr('id'));
    $form.insertAfter($parent.find('.comment-content'));
  });

  // 提交评论
  $('.comments').on('click', '.comment-submit', function() {
    var $textarea = $(this).siblings('.comment-textarea');
    var $parent = $(this).closest('li');
    var comment = $textarea.val();
    var parentId = $(this).data('parent');

    if (comment !== '') {
      var $comment = $('<li>');
      $comment.attr('id', 'comment-' + Date.now());
      $comment.html(`
        <div class="comment-header">
          <span class="comment-author">匿名：</span>
          <span class="comment-time">${getCurrentTime()}</span>
          <a href="#" class="comment-reply">回复</a>
        </div>
        <div class="comment-content">
          ${comment}
        </div>
      `);

      if (parentId) {
        var $children = $parent.find('.children');
        if ($children.length === 0) {
          $children = $('<ul class="children">');
          $parent.append($children);
        }
        $children.append($comment);
      } else {
        $('.comment-list').append($comment);
      }

      $textarea.val('');
    }
  });

  function getCurrentTime() {
    var date = new Date();
    var year = date.getFullYear();
    var month = padZero(date.getMonth() + 1);
    var day = padZero(date.getDate());
    var hours = padZero(date.getHours());
    var minutes = padZero(date.getMinutes());
    var seconds = padZero(date.getSeconds());

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }

  function padZero(num) {
    return num < 10 ? '0' + num : num;
  }
});

在这个示例中，我们使用了 jQuery 来实现评论框的功能：

1. 点击评论头部可以展开或折叠评论内容和子评论。
2. 点击回复按钮会在被回复的评论下面添加一个回复表单。
3. 点击提交按钮会将评论或回复添加到相应的位置，并清空评论框。

需要注意的是，这只是一个简单的示例，实际应用中可能会有更多的功能需求。