评论回复功能代码js html css

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment Reply</title>
    <style>
        .comments {
            margin-bottom: 20px;
        }
 
        .reply-form {
            display: none;
            margin-left: 20px;
        }
    </style>
 
 
    <div class="comments">
        <div class="comment">
            <p>This is the first comment</p>
            <button class="reply-btn">Reply</button>
            <form class="reply-form">
                <input type="text" placeholder="Enter your reply">
                <button type="submit">Submit</button>
            </form>
        </div>
        <div class="comment">
            <p>This is the second comment</p>
            <button class="reply-btn">Reply</button>
                <form class="reply-form">
                    <input type="text" placeholder="Enter your reply">
                    <button type="submit">Submit</button>
                </form>
        </div>
 
        <script>
            const replyBtns = document.querySelectorAll('.reply-btn');
            replyBtns.forEach(replyBtn => replyBtn.addEventListener('click', () => {
                    const replyForm = replyBtn.nextElementSibling;
                    if (replyForm.style.display === '' || replyForm.style.display === '') {
                        replyForm.style.display = 'block';
                    } else {
                        replyForm.style.display = 'none';
                    }
            }));
            
        </script>
 
                            </div>
                            
                        复制