类似这种镶套回复评论:
<div>
<ul>
<!--一条评论 begin-->
<li>
<div class="user-column">
<div class="user-reply">
<a class="c-grey2 small" href="javascript:void(0);"><span class="reply-icon reply"></span><span class="to-reply" href="javascript:void(0);">回 复</span> </a>
<a class="c-grey2 small" href="javascript:void(0);"><span class="reply-icon look-reply"></span><span class="show-reply" href="javascript:void(0);">查看回复(<em>7</em>)</span></a>
</div>
<!--span10 begin-->
<div class="span10">
<div class="show-comment-box" style="display: none;">
<div class="deshed-arrow">
<img src="data:images/solid_arrow.jpg"/>
</div>
<div class="comment-pan">
<textarea name="content" rows="" maxlength="300"></textarea>
<span class="publish">回 复</span>
</div>
</div>
</div>
<!--span10 end-->
<!--span10 begin-->
<div class="span10">
<!-- 用户回复 begin-->
<div class="user-column-reply" style="display: none;">
<div class="deshed-arrow">
<img src="data:images/dashed_arrow_up.jpg"/>
</div>
<ul class="comment-list">
<li> <div class="user-column">
<div class="user-reply">
<a class="c-grey2 small" href=""><span class="reply-icon like"></span>(<em>702</em>)</a>
<a class="c-grey2 small" href="javascript:void(0);">
<span class="reply-icon reply"></span>
<span class="to-reply" href="javascript:void(0);">回 复</span>
</a>
</div>
<!--span10 begin-->
<div class="span10">
<div class="show-comment-box" style="display: none;">
<div class="comment-pan">
<textarea name="content" rows="" maxlength="300"></textarea>
<span class="publish">回 复</span>
</div>
</div>
</div>
<!--span10 end-->
</li>
</ul>
</div>
<!--用户回复 end--> </li>
<!--一条评论 end-->
</ul>
</div>
JQ代码:
<script type="text/javascript">
//点击回复 $(".show-reply").click(function() {//点击回复
var $i = $(this);
if ($i.text() != "收起回复") {
$i.data("text", $i.text());
$i.text("收起回复");
} else $i.text($i.data("text"));
$i.closest(".user-column").find(".user-column-reply").toggle();
})
$(".to-reply").click(function() {//点击回复
var $i = $(this);
if ($i.text() != "暂不回复") {
$i.data("text", $i.text());
$i.text("暂不回复");
} else $i.text($i.data("text"));
$i.closest(".user-reply").next().find(".show-comment-box").toggle();
}) </script>