标签:
类似这种镶套回复评论:
<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="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="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>
标签:
原文地址:http://www.cnblogs.com/px9403/p/5796353.html