Andaikan struktur HTML anda adalah seperti berikut

<p class="article">
    <button class="reply-btn">回复</button> 
    <p class="comment-wrap">
      <input class="comment-input">
      <button class="comment-btn">提交评价</button>    
    </p>
</p>
<p class="article">
    <button class="reply-btn">回复</button> 
    <p class="comment-wrap">
      <input class="comment-input">
      <button class="comment-btn">提交评价</button>    
    </p>
</p>

1. Berkenaan kewujudan kotak kandungan balasan, saya secara peribadi berpendapat bahawa ia harus diberikan terlebih dahulu untuk mengelakkan manipulasi DOM yang berlebihan apabila mengklik, yang akan menjejaskan kecekapan. Dan kod html yang dilampirkan kemudian boleh menyebabkan kod js tidak berkuat kuasa padanya~

2. Apabila kotak balasan dipaparkan, ia mempunyai kelas tunjukkan Apabila kotak balasan yang dipaparkan diklik, kelas tunjukkan dialih keluar untuk menunjukkan bahawa kotak balasan telah disembunyikan, dan kemudian program menentukan sama ada kotak balasan mengandungi . menunjukkan kelas.

$('.reply-btn').click(function(){
    var $commentWrap = $(this).siblings('.comment-wrap');
    // 3. 点击其他回复按钮时，原先的回复框隐藏
    $(this).parent('.article').siblings().find('show.comment-wrap').hide();
    
    // 判断点击一次回复，显示回复框，再点击一次就隐藏
    if($commentWrap.hasClass('show')){
        // 隐藏
        $commentWrap.removeClass('show').hide();
    }else{
        // 显示
         $commentWrap.addClass('show').show();
    }
});

Sila pakai jika anda berpuas hati~

Adalah disyorkan untuk mencari suis tab dan mempelajarinya Prinsipnya serupa