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

于是我随意的写了一段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. 微信小程序文字水平垂直居中对齐问题

    我们知道常用的居中对齐方式有很多种例如: text-align:center; align-items:center; justify-content: center; margin: auto; # ...

  2. JQ 获取地址栏参数

    var cat_id = getParamValue("cat_id"); if(cat_id == null){ cat_id = 1; } $("#brand_cat ...

  3. Java设计模式（9）适配器模式（Adapter模式）

    适配器模式定义:将两个不兼容的类纠合在一起使用,属于结构型模式,需要有Adaptee(被适配者)和Adaptor(适配器)两个身份. 为何使用适配器模式 我们经常碰到要将两个没有关系的类组合在一起使用 ...

  4. CSS条件注释

    由于浏览器版本的不同,对CSS里某些元素的解释也不一样,针对浏览器版本不同而选择不同CSS的代码,其实我们还可以利用条件注释的方法来达到类似的目的,什么是条件注释,在此简单介绍一下,无非就是一些if判 ...

  5. QTcpSocket 发送和接收数据的几种方法

    1.QTcpSocket 继承于QAbstractSocket继承于QIODevice 2.QTcpSocket 提供的几种接收和发送数据方法 write ( const char *, qint64 ...

  6. HBase启动后发现HMaster进程消失了

    HMaster没起来很多原因,这次看日志是这个.详细请看:http://www.bkjia.com/yjs/982064.html Hbase:namespace异常处理,hbase异常处理 Hbas ...

  7. Self20171218_Eclipse+TestNg HelloWorld

    作为一个经典的入门例子,这里展示如何开始使用TestNG单元测试框架. 使用的工具 : TestNG 6.8.7 Maven 3 Eclipse IDE TestNG下载并安装 从这里 http:// ...

  8. 【Centos】【Python】【Flask】阿里云上部署一个 flask 项目

    1. 安装 python3 和 pip3 参考:http://www.cnblogs.com/mqxs/p/8692870.html 2.安装 lnmpa 集成开发环境 参考:http://www.c ...

  9. 在Unity场景中更改天空盒的步骤

    一.介绍 目的:在Unity场景中制作一个天空盒. 软件环境:Unity 2017.3.0f3,VS2013. 参考 skybox 二.自制一个天空盒 1,创建一个材质material 2,更改属性为 ...

  10. MySQL 先按某字段分组，再取每组中前N条记录

    按 gpcode每组 取每组 f4 最大的那条记录: 方法一: select * from calcgsdataflash a where gscode = 'LS_F' and ymd >= ...