ボタンがクリックされていないと表示され、ボタンがクリックされて「閉じる」と表示されます

Question

私はその方法を表示するFAQリストを持っています。

「回答を見る」をクリックするとすぐに「閉じる」になります。

「閉じる」をクリックすると私の問題は元に戻せません。もう一度 "答えを見る"ボタンになるはずです。ここで

は私のスクリプト、HTML

<p class="faq-question">Question</p> 
<div class="collapse js-faq-answer" id="collapseExample"> 
    <div class="well"> 
     Answer 
    </div> 
</div> 
<a class="btn btn-primary js-faq-button" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">See the answer</a> 

されており、ここにある

$(document).ready(function() { 
    $('.js-faq-button').click(function(){ 
     if(this.click){ 
      $(this).addClass('js-faq-button-clicked'); 
      $(this).removeClass('js-faq-button'); 
      $('.js-faq-button-clicked').html('Close'); 
     } 
     else{ 
      $(this).addClass('js-faq-button'); 
      $(this).removeClass('js-faq-button-clicked'); 
      $('.js-faq-button-clicked').html('See the answer'); 
     } 
    }); 
}); 

Answer 1

条件が正しくありません。ボタンにjs-faq-button-clickedクラスがあるかどうかを確認します。追加しない場合は削除します。

これは唯一の方法ではありませんが、確かに有効です。

$(document).ready(function() { 
    $('.js-faq-button').click(function(){ 
     if(!$(this).hasClass("js-faq-button-clicked")){ 
      $(this).addClass('js-faq-button-clicked'); 
      $(this).removeClass('js-faq-button'); 
      $('.js-faq-button-clicked').html('Close'); 
     } 
     else{ 
      $(this).addClass('js-faq-button'); 
      $(this).removeClass('js-faq-button-clicked'); 
      $('.js-faq-button-clicked').html('See the answer'); 
     } 
    }); 
}); 

Answer 2

あなたがそれをクリックすると、そのテキストをチェックしてみてください。それがあれば、それは「近い」ベーコンます「答えはを参照してください。」

Answer 3

もあれば条件だけではなく、「クリック」イベントであなたのボタンの値（すなわち、テキスト）をチェックしてみます。現在のところ、あなたは単に「クリックすると閉じる」と言っているだけです。あなたは、2つのプロンプトの間を行き来することを知らせる必要があります。

Answer 4

js-faq-button-clickedをクラスとして追加し、それを切り替えます。

$(document).ready(function(){ 
    $('.js-faq-button').on('click',function(){ 
     var self = $(this); 
     self.toggleClass('js-faq-button-clicked'); 
     if(self.hasClass('js-faq-button-clicked')) { 
      self.html('Close'); 
     } 
     else { 
      self.html('See the answer'); 
     } 
    }); 
});