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

于是我随意的写了一段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. .net修炼笔记

    1. 底层基础概念 CIL(Common Intermediate Language) 中间语言(C# VB 最终编译成CIL语言) BCL(Base Class Library) 基础类库 (Sys ...

  2. 多线程二：线程池(ThreadPool)

    在上一篇中我们讲解了多线程的一些基本概念,并举了一些例子,在本章中我们将会讲解线程池:ThreadPool. 在开始讲解ThreadPool之前,我们先用下面的例子来回顾一下以前讲过的Thread. ...

  3. Linux下 ln 命令详解

    这是linux中一个非常重要命令,请大家一定要熟悉.它的功能是为某一个文件或目录在另外一个位置建立一个同步的链接,类似Windows下的超级链接. 这个命令最常用的参数是-s,具体用法是: sudo ...

  4. SCPD

    serviceType:服务类型,UPnP论坛规定为urn:schemas-upnp-org:service:serviceType: ver,serviceType:ver由用户自己设定 SCPDU ...

  5. 2016年第七届蓝桥杯C/C++B组省赛题目解析

    题目1:煤球数目 有一堆煤球,堆成三角棱锥形.具体:第一层放1个,第二层3个(排列成三角形),第三层6个(排列成三角形),第四层10个(排列成三角形),....如果一共有100层,共有多少个煤球?请填 ...

  6. Spring JDBC调用存储过程

    以下示例将演示spring jdbc如何调用存储过程.将通过调用存储过程来读取Student表中的一个可用记录.将传递一个学生ID并获取学生记录信息. 语法: SimpleJdbcCall jdbcC ...

  7. Autofac应用总结

    准备: public interface IDAL { void Insert(string commandText); } public class SqlDAL : IDAL { public v ...

  8. (转)live555学习笔记9－h264 RTP传输详解(1)

    九 h264 RTP传输详解(1) 前几章对Server端的介绍中有个比较重要的问题没有仔细探究:如何打开文件并获得其SDP信息.我们就从这里入手吧. 当RTSPServer收到对某个媒体的DESCR ...

  9. Python MySQL(MySQLdb)

    From: http://www.yiibai.com/python/python_mysql.html Python标准的数据库接口的Python DB-API(包括Python操作MySQL).大 ...

  10. [lua, mysql] 将多条记录数据组合成一条sql插入语句(for mysql)

    -- 演示将多条记录数据组合成一条sql插入语句(for mysql) function getTpl0(tname) -- 获取表各个字段 local t = { tpl_pack = {" ...