酷秀博客
首页/html评论列表回复表单定位教程

html评论列表回复表单定位

admin的头像admin8个月前教程151热度

进行更新微博客程序的时候，准备重新修改一下评论插件的回复表单定位问题，经过AI反复修改生成最终代码如下。

<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
    <meta charset="UTF-8"><br />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
    <title>Comment List with Reply Form</title><br />
    <style><br />
        #comment-section {<br />
            margin-bottom: 20px;<br />
        }<br />
<br />
        .comment {<br />
            margin-bottom: 15px;<br />
            padding: 10px;<br />
            border: 1px solid #ccc;<br />
            border-radius: 5px;<br />
        }<br />
<br />
        .reply-form {<br />
            margin-top: 10px;<br />
        }<br />
<br />
        .reply-form textarea {<br />
            width: 100%;<br />
            height: 60px;<br />
            margin-bottom: 10px;<br />
        }<br />
<br />
        #bottom-reply-form {<br />
            margin-top: 20px;<br />
            padding: 10px;<br />
            border: 1px solid #ccc;<br />
            border-radius: 5px;<br />
        }<br />
<br />
        #bottom-reply-form textarea {<br />
            width: 100%;<br />
            height: 60px;<br />
            margin-bottom: 10px;<br />
        }<br />
    </style><br />
</head><br />
<body><br />
    <div id="comment-section"><br />
        <div class="comment"><br />
            <p>This is a comment.</p><br />
            <button class="reply-btn">回复</button><br />
        </div><br />
        <div class="comment"><br />
            <p>This is another comment.</p><br />
            <button class="reply-btn">回复</button><br />
        </div><br />
    </div><br />
    <form id="bottom-reply-form"><br />
        <textarea placeholder="Write your reply..."></textarea><br />
        <button type="submit">Submit</button><br />
    </form><br />
    <script><br />
        document.addEventListener('DOMContentLoaded', function() {<br />
            const replyButtons = document.querySelectorAll('.reply-btn');<br />
            const replyForm = document.getElementById('bottom-reply-form');<br />
            let originalParent = replyForm.parentElement; // Store the original parent of the reply form<br />
<br />
            replyButtons.forEach(button => {<br />
                button.addEventListener('click', function() {<br />
                    if (this.textContent === '取消') {<br />
                        // If the button text is "Cancel", move the form back to the bottom<br />
                        originalParent.appendChild(replyForm);<br />
                        this.textContent = '回复';<br />
                    } else {<br />
                        // Otherwise, move the form to the clicked comment<br />
                        replyButtons.forEach(btn => {<br />
                            if (btn !== this) {<br />
                                // Reset other buttons to "Reply"<br />
                                btn.textContent = '回复';<br />
                                if (btn.parentElement.classList.contains('comment') && btn.nextElementSibling === replyForm) {<br />
                                    originalParent.appendChild(replyForm);<br />
                                }<br />
                            }<br />
                        });<br />
<br />
                        // Move the form to the clicked comment<br />
                        if (replyForm.parentElement.classList.contains('comment')) {<br />
                            // If the form is already in a comment, move it back to the bottom<br />
                            originalParent.appendChild(replyForm);<br />
                        }<br />
                        this.parentNode.appendChild(replyForm);<br />
                        this.textContent = '取消';<br />
                    }<br />
                });<br />
            });<br />
        });<br />
    </script><br />
</body><br />
</html><br />
打赏反馈赞 0

#免责声明#

本文为转载 或 原创内容，未经授权禁止转载、摘编、复制及镜像使用、转载请注明作者、出处及原文链接、违者将依法追究责任。

签名： 最忠诚的BUG开发者来自: 重庆市. Chrome浏览器
文章目录