html评论列表回复表单定位

<!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 />