Jquery 如何扩展答案形式

我有一个非常好的评论列表布局和响应示例

/**
*奥斯库罗:#283035
*阿苏尔：03658c
*详细说明：#c7cacb
*丰多：第3节
----------------------------------*/
* {
保证金：0；
填充：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
a{
颜色：03658c；
文字装饰：无；
}
保险商实验室{
列表样式类型：无；
}
身体{
字体系列：“Roboto”、Arial、Helvetica、无衬线、Verdana；
背景：#dee1e3；
}
/** ====================
*科门塔里奥斯酒店
=======================*/
.comments容器{
利润率：60px自动15px；
宽度：768px；
}
.注释容器h1{
字体大小：36px；
颜色：283035；
字体大小：400；
}
.a.评论{
字号：18px；
字号：700；
}
.意见清单{
边缘顶部：30px；
位置：相对位置；
}
/**
*线/线
-----------------------*/
.评论列表：之前{
内容：''；
宽度：2倍；
身高：100%；
背景：c7cacb；
位置：绝对位置；
左：32px；
排名：0；
}
.评论列表：之后{
内容：''；
位置：绝对位置；
背景：c7cacb；
底部：0；
左：27px；
宽度：7px；
高度：7px；
边框：3px实心#dee1e3；
-webkit边界半径：50%；
-moz边界半径：50%；
边界半径：50%；
}
.reply list:之前，.reply list:之后{display:none；}
.回复列表李：之前{
内容：''；
宽度：60px；
高度：2倍；
背景：c7cacb；
位置：绝对位置；
顶部：25px；
左：-55px；
}
.意见列表李{
边缘底部：15px；
显示：块；
位置：相对位置；
}
.评论列表李：之后{
内容：''；
显示：块；
明确：两者皆有；
身高：0；
宽度：0；
}
.答复清单{
左侧填充：88px；
明确：两者皆有；
边缘顶部：15px；
}
/**
*化身
---------------------------*/
.评论列表.评论头像{
宽度：65px；
高度：65px；
位置：相对位置；
z指数：99；
浮动：左；
边框：3px实心#FFF；
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
-webkit盒阴影：0 1px2pRGBA（0,0,0,0.2）；
-莫兹盒阴影：0 1px2pRGBA（0,0,0,0.2）；
盒影：0 1px2pRGBA（0,0,0,0.2）；
溢出：隐藏；
}
.评论列表.评论头像img{
宽度：100%；
身高：100%；
}
.回复列表.评论头像{
宽度：50px；
高度：50px；
}
.注释主要级别：之后{
内容：''；
宽度：0；
身高：0；
显示：块；
明确：两者皆有；
}
/**
*科门塔里奥咖啡馆
---------------------------*/
.注释列表.注释框{
宽度：680px；
浮动：对；
位置：相对位置；
-webkit盒阴影：0 1px 1px rgba（0,0,0,0.15）；
-莫兹盒阴影：0 1px 1px rgba（0,0,0,0.15）；
盒影：0 1px 1px rgba（0,0,0,0.15）；
}
.注释列表.注释框：之前，.注释列表.注释框：之后{
内容：''；
身高：0；
宽度：0；
位置：绝对位置；
显示：块；
边框宽度：10px 12px 10px 0；
边框样式：实心；
边框颜色：透明#fcfc；
顶部：8px；
左：-11px；
}
。注释列表。注释框：之前{
边框宽度：11px 13px 11px 0；
边框颜色：透明rgba（0,0,0,0.05）；
左-12px；
}
.回复列表.评论框{
宽度：610px；
}
.注释框.注释头{
背景:#fcfc；
填充：10px 12px；
边框底部：1px实心#e5；
溢出：隐藏；
-webkit边界半径：4px4p0；
-moz边界半径：4px4p0；
边界半径：4px4p0；
}
.注释框.注释标题i{
浮动：对；
左边距：14px；
位置：相对位置；
顶部：2个；
颜色：#A6；
光标：指针；
-webkit过渡：颜色0.3s轻松；
-o-过渡：颜色0.3s；
过渡：颜色0.3s；
}
.注释框.注释标题i:悬停{
颜色：03658c；
}
.注释框.注释名称{
颜色：283035；
字体大小：14px；
字号：700；
浮动：左；
右边距：10px；
}
.注释框.注释名称a{
颜色：283035；
}
.注释框.注释头跨度{
浮动：左；
颜色：#999；
字体大小：13px；
位置：相对位置；
顶部：1px；
}
.注释框.注释内容{
背景：#FFF；
填充：12px；
字体大小：15px；
颜色：#5959；
-webkit边界半径：0 0 4px 4px；
-moz边界半径：0 0 4px 4px；
边界半径：0 0 4px 4px；
}
.comment-box.comment-name.by-author.comment-box.comment-name.by-author a{color:#03658c；}
.注释框.注释名称.作者：后{
内容：'自动'；
背景：#03658c；
颜色：#FFF；
字体大小：12px；
填充物：3px 5px；
字号：700；
左边距：10px；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
}
/** =====================
*响应的
========================*/
@仅介质屏幕和（最大宽度：766px）{
.comments容器{
宽度：480px；
}
.注释列表.注释框{
宽度：390px；
}
.回复列表.评论框{
宽度：320px；
}
}

评论


20分钟前
Lorem ipsum dolor sit amet，奉献精英。全方位的生命、选择、智慧？


10分钟前
Lorem ipsum dolor sit amet，奉献精英。全方位的生命、选择、智慧？


10分钟前
Lorem ipsum dolor sit amet，奉献精英。全方位的生命、选择、智慧？




10分钟前
Lorem ipsum dolor sit amet，奉献精英。全方位的生命、选择、智慧？


<li class="comment" data-comment_id="1">

<button type="button" class="comment-reply-link">Reply</button>

$(document).on('click', '.comment-reply-link', function(e){
  e.preventDefault();

  // Show the previously clicked button.
  $('#comment-reply').closest('.comment')
    .find('.comment-reply-link').show();

  // Hide the button.
  $(this).hide();

  // Move the comment reply form wrapper.
  $('#comment-reply').insertAfter(this)
    .find('.comment-name').focus()                // focus on the Name field
    .end().find('.cancel').removeClass('hidden'); // show the cancel button
});

$('#comment-reply').on('click', '.cancel', function(e){
  e.preventDefault();
  this.blur();

  // Show the previously clicked button.
  $(this).closest('.comment')
    .find('.comment-reply-link').show();

  // Place the comment reply form back to its initial position.
  $('#comment-reply')
    .find('.cancel').addClass('hidden')        // show the cancel button
    .end().insertAfter('.comments-container'); // and then move the form
});

$('#comment-reply').on('click', '.submit', function(e){
  e.preventDefault();

  const $comment = $(this).closest('.comment');

  // Get the post and comment IDs.
  const comment_id = $comment.data('comment_id');
  const post_id = $('#comment-reply').find('.post-id').val();
  console.log(post_id, comment_id);

  // Here you can make your AJAX call...
});