js實現點擊評論進行顯示回復框


有人在群里問如何在留言評論那里點擊回復按鈕,下面就自動顯示一個回復框,他想要的效果如圖:

於是我隨意的寫了一段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>

效果如圖


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM