有人在群里问如何在留言评论那里点击回复按钮，下面就自动显示一个回复框，他想要的效果如图：

于是我随意的写了一段HTML，代码如下：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

</head>

<ul>

    <li>

        1号用户评论

        <div>hello,我是第1条评论 2018-03-21 12:00:00 <a href="javascript:;" class="reply_btn" >回复</a></div>

    </li>

    <li>

        2号用户评论

        <div>hello,我是第2条评论 2018-03-21 12:00:00 <a href="javascript:;" class="reply_btn" >回复</a></div>

    </li>

    <li>

        3号用户评论

        <div>hello,我是第3条评论 2018-03-21 12:00:00 <a href="javascript:;" class="reply_btn" >回复</a></div>

    </li>

</ul>

<body>

    <script type="text/javascript">

        $(function(){

            //页面加载完毕后开始执行的事件

            $(".reply_btn").click(function(){

                $(".reply_textarea").remove();

                $(this).parent().append("<div class='reply_textarea'><textarea name='' cols='40' rows='5'></textarea><br/><input type='submit' value='发表' /></div>");

            });

        });

    </script>

</body>

</html>

效果如图

js实现点击评论进行显示回复框的更多相关文章

  1. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  2. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  3. js在点击的按钮下面弹框

    效果如图,点击对应的按钮时,弹框会在对应的按钮下面显示,可以应用于列表等场景 前端代码 <%@ Page Language="C#" AutoEventWireup=&quo ...

  4. html制作，点击文字超链接显示文本框，再点击文字超链接隐藏文本框

    </head><body> <script> window.onload=function(){ document.getElementById('click'). ...

  5. JS 通过点击事件动态添加文本框

    直接拷贝到浏览器就能实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <htm ...

  6. Html + JS ： 点击对应的按钮，进行选择是隐藏还是显示（用户回复功能）

    例如: 当我点击按钮1时,点击第一下进行显示This is comment 01,点击第二下隐藏This is comment 01 当我点击按钮2时,点击第一下进行显示This is comment ...

  7. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

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

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

  9. 解决 ECSHOP v273 产品详情页面评论不显示的问题

    问题描述:   最近同事使用ECSHOP v273帮客户开发了一个商城系统,部署到服务器在测试的时候发现产品详情页面里测试的评论不显示,只显示了数量(其实是产品购买的次数)   因为同事搞了好长时间都 ...

随机推荐

  1. linq操作符：串联操作符

    串联是一个将两个集合连接在一起的过程.在Linq中,这个过程通过Concat操作符实现.Concat操作符用于连接两个集合,生成一个新的集合.来看看Concat操作符的定义: public stati ...

  2. java 、HashMap 和单例

    前段时间在项目中遇到一个问题.当多个系统同时运行时,大部分系统能够良好运转,部分却卡死在了启动界面.以下是我解决该问题的步骤和总结:   1.复现问题.重新走了一遍出问题的过程,发现问题的确存在.说明 ...

  3. 通过URI返回File文件

    /** * 通过Uri返回File文件 * 注意:通过相机的是类似content://media/external/images/media/97596 * 通过相册选择的:file:///stora ...

  4. USB学习笔记连载（八）：FX2替换到FX2LP需要注意事项

    对于使用FX2的用户,可以升级到FX2LP,上述的应用笔记<AN4078-C>中就讲解了在升级中的注意事项.   必要的修改:   1.晶振的匹配电容需要更改,FX2LP是12pF,不过笔 ...

  5. FPGA中的时序分析(一)

    谈及此部分,多多少少有一定的难度,笔者写下这篇文章,差不多是在学习FPGA一年之后的成果,尽管当时也是看过类似的文章,但是都没有引起笔者注意,笔者现在再对此知识进行梳理,也发现了有很多不少的收获.笔者 ...

  6. Linux高级字符设备驱动 poll方法（select多路监控原理与实现）

    1.什么是Poll方法,功能是什么? 2.Select系统调用(功能)      Select系统调用用于多路监控,当没有一个文件满足要求时,select将阻塞调用进程.      int selec ...

  7. C++ 结构体和枚举

    共同体 共同体(union) 是一种数据格式, 它能够存储不同的数据类型, 但只能同时存储其中的一种类型.也就是说, 结构可以同时存储int.long 和 double, 共同体只能存储int.lon ...

  8. 情商UP:不遵守八小时工作制，你就能富起来?？

    从工作第一天起,我们就默认了八小时工作制,但从没有想过,这是不是最高效的工作时间. 事实上,八小时工作制并没有科学依据,不过是多年来约定俗成的习惯罢了. 那些坚守八小时工作制的人和敢于打破它的人,都获 ...

  9. 【转】【Android】Android Drawable Shape 组合画田字格

    使用layer-list组合多个Shap <?xml version="1.0" encoding="utf-8"?> <layer-list ...

  10. 第三百七十九节，Django+Xadmin打造上线标准的在线教育平台—xadmin的安装

    第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装 xadmin介绍 xadmin是基于Django的admin开发的更完善的后台管理系统,页面基于Bootstr ...