类似这种镶套回复评论:

  1. <div>
  2. <ul>
  3. <!--一条评论 begin-->
  4. <li>
  5. <div class="user-column">
  6. <div class="user-reply">
  7. <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>
  8. <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>
  9. </div>
  10. <!--span10 begin-->
  11. <div class="span10">
  12. <div class="show-comment-box" style="display: none;">
  13. <div class="deshed-arrow">
  14. <img src="data:images/solid_arrow.jpg"/>
  15. </div>
  16. <div class="comment-pan">
  17. <textarea name="content" rows="" maxlength="300"></textarea>
  18. <span class="publish">回 复</span>
  19. </div>
  20. </div>
  21. </div>
  22. <!--span10 end-->
  23. <!--span10 begin-->
  24. <div class="span10">
  25. <!-- 用户回复 begin-->
  26. <div class="user-column-reply" style="display: none;">
  27. <div class="deshed-arrow">
  28. <img src="data:images/dashed_arrow_up.jpg"/>
  29. </div>
  30. <ul class="comment-list">
  31. <li>
  32.  
  33. <div class="user-column">
  34. <div class="user-reply">
  35. <a class="c-grey2 small" href=""><span class="reply-icon like"></span><em>702</em></a>
  36. <a class="c-grey2 small" href="javascript:void(0);">
  37. <span class="reply-icon reply"></span>
  38. <span class="to-reply" href="javascript:void(0);">回 复</span>
  39. </a>
  40. </div>
  41. <!--span10 begin-->
  42. <div class="span10">
  43. <div class="show-comment-box" style="display: none;">
  44. <div class="comment-pan">
  45. <textarea name="content" rows="" maxlength="300"></textarea>
  46. <span class="publish">回 复</span>
  47. </div>
  48. </div>
  49. </div>
  50. <!--span10 end-->
  51. </li>
  52. </ul>
  53. </div>
  54. <!--用户回复 end-->
  55.  
  56. </li>
  57. <!--一条评论 end-->
    </ul>

  58. </div>

  

JQ代码:

  1. <script type="text/javascript">
  2. //点击回复
  3.  
  4. $(".show-reply").click(function() {//点击回复
  5. var $i = $(this);
  6. if ($i.text() != "收起回复") {
  7. $i.data("text", $i.text());
  8. $i.text("收起回复");
  9. } else $i.text($i.data("text"));
  10. $i.closest(".user-column").find(".user-column-reply").toggle();
  11. })
  12. $(".to-reply").click(function() {//点击回复
  13. var $i = $(this);
  14. if ($i.text() != "暂不回复") {
  15. $i.data("text", $i.text());
  16. $i.text("暂不回复");
  17. } else $i.text($i.data("text"));
  18. $i.closest(".user-reply").next().find(".show-comment-box").toggle();
  19. })
  20.  
  21. </script>

  

jq用户评论点击回复简单代码。的更多相关文章

  1. C#截取用户的点击事件的代码

    在代码过程中中,把做工程过程中常用的代码备份一下,如下代码内容是关于C#截取用户的点击事件的代码,应该是对大家也有好处. private void SomeControl_KeyDown(object ...

  2. iOS之防止用户重复点击Button(按钮)问题

    在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...

  3. js实现点击评论进行显示回复框

    有人在群里问如何在留言评论那里点击回复按钮,下面就自动显示一个回复框,他想要的效果如图: 于是我随意的写了一段HTML,代码如下: <!DOCTYPE HTML> <html lan ...

  4. 模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)

      我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么作为初学者,要模仿这些功能有点复杂的,最起码表的关系得弄清楚~~ 先把思路理一下: (1)用户登录,用session读取 ...

  5. python 全栈开发,Day82(点赞和踩灭,用户评论)

    一.点赞和踩灭 样式 先来做样式,修改article_detail.html,增加div_digg的div {% extends "base.html" %} {% block c ...

  6. Nodejs之MEAN栈开发(九)---- 用户评论的增加/删除/修改

    由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...

  7. Node.js实现用户评论社区(体验前后端开发的乐趣)

    前面 接着上一节的内容来,今天我们要完成一个用Node开发后台服务器,实现一个简单的用户评论社区.可以先看下效果图: 开始 建立项目文件夹comment-list,在里面新建一个public文件夹,p ...

  8. Redis:安装、配置、操作和简单代码实例(C语言Client端)

    Redis:安装.配置.操作和简单代码实例(C语言Client端) - hj19870806的专栏 - 博客频道 - CSDN.NET Redis:安装.配置.操作和简单代码实例(C语言Client端 ...

  9. 查找和定位Android应用的按钮点击事件的代码位置基于Xposed Hook实现

    本文博客地址:https://blog.csdn.net/QQ1084283172/article/details/80956455 在进行Android程序的逆向分析的时候,经常需要通过Androi ...

随机推荐

  1. uCOS-II之移植20160823

    首先我们看一下uC/OS-II的框架图: 1.配置文件修改 +------------------------------------------ |core: os_core.c |  os: os ...

  2. 图像灰度化方法总结及其VC实现

    http://blog.csdn.net/likezhaobin/article/details/6915754 最近一段时间作者开始进行运动目标识别定位系统设计,本文以及后续的几篇文章都是从一个图像 ...

  3. Codeforces Round #306 (Div. 2)A B C D 暴力 位/暴力 暴力 构造

    A. Two Substrings time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  4. Codeforces Round #358 (Div. 2) A B C 水 水 dfs序+dp

    A. Alyona and Numbers time limit per test 1 second memory limit per test 256 megabytes input standar ...

  5. Codeforces 25.E Test

    E. Test time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...

  6. 洛谷P1588 丢失的牛

    P1588 丢失的牛 158通过 654提交 题目提供者JOHNKRAM 标签USACO 难度普及/提高- 时空限制1s / 128MB 提交  讨论  题解 最新讨论更多讨论 答案下载下来是对的,但 ...

  7. Leetcode 832.翻转图像

    1.题目描述 给定一个二进制矩阵 A,我们想先水平翻转图像,然后反转图像并返回结果. 水平翻转图片就是将图片的每一行都进行翻转,即逆序.例如,水平翻转 [1, 1, 0] 的结果是 [0, 1, 1] ...

  8. 「Linux」centos7安装mysql

    1.yum仓库下载MySQL:sudo yum localinstall https://repo.mysql.com//mysql80-community-release-el7-1.noarch. ...

  9. 前端PHP入门-029-文件操作-掌握级别

    人生只有三天,活在昨天的人迷惑:活在明天的人等待:活在今天的人最踏实.你永远无法预测意外和明天哪个来得更早,所以,我们能做的,就是尽最大的努力过好今天.请记住:今天永远是昨天死去的人所期待的明天. f ...

  10. turn服务部署

    centos7.2 git clone https://github.com/coturn/coturnyum -y install openssl-develyum install openssl ...