javascript - 使用 HTML/CSS 的树状评论/回复部分

Question

我正在使用Laravel和前端构建网站，我正在使用bootstrap. 我有一个博客页面，我想要评论/回复系统。现在，我已经完成了所有工作，但无法为评论/回复制作动态树状布局。现在，我正在使用静态布局，这是我的HTML：

请在 jsfiddle 上运行此代码片段以查看设计。我想让它动态化，这样每当我发表评论或回复时，它都应该在上面的布局中相应地调整自己。每当我点击回复按钮时，我想在点击的按钮下方显示一个回复表单。提前致谢。

.comments-area {
  background: #f1f9ff;
  padding: 50px 30px;
  margin-top: 50px;
}

@media (max-width: 414px) {
  .comments-area {
    padding: 50px 8px;
  }
}

.comments-area h4 {
  text-align: center;
  margin-bottom: 50px;
  color: #002347;
  font-size: 18px;
}

.comments-area h5 {
  font-size: 16px;
  margin-bottom: 0px;
}

.comments-area a {
  color: #002347;
}

.comments-area .comment-list {
  padding-bottom: 30px;
}

.comments-area .comment-list:last-child {
  padding-bottom: 0px;
}

.comments-area .comment-list.left-padding {
  padding-left: 25px;
}

@media (max-width: 413px) {
  .comments-area .comment-list .single-comment h5 {
    font-size: 12px;
  }
  .comments-area .comment-list .single-comment .date {
    font-size: 11px;
  }
  .comments-area .comment-list .single-comment .comment {
    font-size: 10px;
  }
}

.comments-area .thumb {
  margin-right: 20px;
}

.comments-area .date {
  font-size: 13px;
  color: #777777;
  margin-bottom: 13px;
}

.comments-area .comment {
  color: #777777;
  margin-bottom: 0px;
}

.comments-area .btn-reply {
  background-color: #fff;
  color: #002347;
  border: 1px solid #eee;
  padding: 2px 18px;
  font-size: 12px;
  display: block;
  font-weight: 600;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.comments-area .btn-reply:hover {
  background: #fdc632;
  color: #002347;
}

.comment-form {
  background: #f1f9ff;
  text-align: center;
  padding: 47px 30px 43px;
  margin-top: 50px;
  margin-bottom: 40px;
}

.comment-form h4 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 18px;
  line-height: 22px;
  color: #002347;
}

.comment-form .name {
  padding-left: 0px;
}

@media (max-width: 767px) {
  .comment-form .name {
    padding-right: 0px;
    margin-bottom: 1rem;
  }
}

.comment-form .email {
  padding-right: 0px;
}

@media (max-width: 991px) {
  .comment-form .email {
    padding-left: 0px;
  }
}

.comment-form .form-control {
  padding: 8px 20px;
  background: #fff;
  border: none;
  border-radius: 0px;
  width: 100%;
  font-size: 14px;
  color: #777777;
  border: 1px solid transparent;
}

.comment-form .form-control:focus {
  box-shadow: none;
  border: 1px solid #eee;
}

.comment-form textarea.form-control {
  height: 140px;
  resize: none;
}

.comment-form ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 15px;
  color: #777;
}

.comment-form ::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 15px;
  color: #777;
}

.comment-form :-ms-input-placeholder {
  /* IE 10+ */
  font-size: 15px;
  color: #777;
}

.comment-form :-moz-placeholder {
  /* Firefox 18- */
  font-size: 15px;
  color: #777;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/9da9b46707.js"></script>
<div class="row">
  <div class="col-lg-12">
    <div class="comments-area">
      <h4>03 Comments</h4>
      <div class="comment-list">
        <div class="single-comment justify-content-between d-flex">
          <div class="user justify-content-between d-flex">
            <div class="thumb">
              <i class="fa fa-user" style="font-size:30px; width:30px;"></i>
            </div>
            <div class="desc">
              <h5>Emilly Blunt</h5>
              <p class="date">December 4, 2017 at 3:12 pm </p>
              <p class="comment">
                Never say goodbye till the end comes!
              </p>
            </div>
          </div>
          <div class="reply-btn">
            <a href="" class="btn-reply text-uppercase">reply</a>
          </div>
        </div>
      </div>
      <div class="comment-list left-padding">
        <div class="single-comment justify-content-between d-flex">
          <div class="user justify-content-between d-flex">
            <div class="thumb">
              <i class="fa fa-user" style="font-size:30px; width:30px;"></i>
            </div>
            <div class="desc">
              <h5>Elsie Cunningham</h5>
              <p class="date">December 4, 2017 at 3:12 pm </p>
              <p class="comment">
                I am Reply of above comment.
              </p>
            </div>
          </div>
          <div class="reply-btn">
            <a href="" class="btn-reply text-uppercase">reply</a>
          </div>
        </div>
      </div>
      <div id="divider-transparent"></div>
      <div class="comment-list">
        <div class="single-comment justify-content-between d-flex">
          <div class="user justify-content-between d-flex">
            <div class="thumb">
              <i class="fa fa-user" style="font-size:30px; width:30px;"></i>
            </div>
            <div class="desc">
              <h5>Ina Hayes</h5>
              <p class="date">December 4, 2017 at 3:12 pm </p>
              <p class="comment">
                Never say goodbye till the end comes!
              </p>
            </div>
          </div>
          <div class="reply-btn">
            <a href="" class="btn-reply text-uppercase">reply</a>
          </div>
        </div>
      </div>
    </div>
    <div class="comment-form">
      <h4>Leave a Comment/Reply</h4>
      <form action="#">
        <div class="row">
          <div class="offset-lg-2 col-lg-4 col-md-4 col-sm-5">
            <input type="text" class="form-control" placeholder="Full Name *" />
          </div>
          <div class="col-lg-4 col-md-4 col-sm-5">
            <input type="text" class="form-control" placeholder="Email *" />
          </div>
        </div><br />
        <div class="row">
          <div class="offset-lg-2 col-lg-8 col-md-8 col-sm-10">
            <textarea rows="5" class="form-control" placeholder="Comment"></textarea>
          </div>
        </div><br />
        <div class="form-group" style="text-align: center;">
          <input type="submit" value="Submit" class="btn btn-primary py-3 px-5 submit-comment">
        </div>
      </form>
    </div>
  </div>
</div>

标签： javascriptjqueryhtmlcssbootstrap-4