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

于是我随意的写了一段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中的分区指的是在不重新排列元素的情况下,将输入序列划分为两部分,然后返回其中一个部分的操作. 一.Take操作符 Take(int n)表示将从序列的开头返回数量为n的连续元素,常用于分页.其 ...

  2. 将url参数转为json对象

    /** * 将url参数转为json对象 * * @param str * @returns {{}} */ function parseQueryString(str){ arr = [], len ...

  3. CATALINA_BASE与CATALINA_HOME的区别

    http://blog.csdn.net/keda8997110/article/details/21400455 —————————————————————————————————————————— ...

  4. <转> linux进程状态的说明

    我只是做一个mark,为了日后复习:http://blog.csdn.net/tianlesoftware/article/details/6457487 他写得非常的详细,值得推荐. 补充一点什么是 ...

  5. .net操作oracle，一定要用管理员身份运行 visual studio 啊，切记切记，免得报奇怪的错误。

    .net操作oracle,一定要用管理员身份运行 visual studio 啊,切记切记,免得报奇怪的错误.

  6. Netty实践

    Netty是JBOSS针对网络开发的一套应用框架,它也是在NIO的基础上发展起来的.netty基于异步的事件驱动,具有高性能.高扩展性等特性,它提供了统一的底层协议接口,使得开发者从底层的网络协议(比 ...

  7. android读取大图片并缓存

    最近开发电视版的云存储应用,要求”我的相册“模块有全屏预览图片的功能,全屏分辨率是1920*1080超清.UI组件方面采用Gallery+ImageSwitcher组合,这里略过,详情参见google ...

  8. ImageMagick安装

    图片处理是大多数电子商务系统必须用到的组件,下面介绍ImageMagick的安装! 一.软件列表ImageMagick-6.7.1-0.tar.gzJMagick-6.4.0-0.tar.gzjpeg ...

  9. form表单target的用法

    偶然有一机会发现form表单的target的用法,可以实现当前页表单提交而不进行跳转刷新.代码如下,首页在页面里准备一form表单和一iframe <form action="提交的a ...

  10. Python奇技淫巧

    Python奇技淫巧 http://andrewliu.in/2015/11/14/Python%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/?hmsr=toutiao.i ...