jQuery

jQuery:間違えた問題(removeClass,addClass)

jQuery:間違えた問題(removeClass,addClass)

 誤解答
 $('.faq-list-item').click(function(){
 var $answer = $(this).find('.answer');
  if($answer.hasClass('.answer-open')){
    $answer.removeClass('answer-open');
    $answer.slideUp();
    $(this).find('span').text('+');
     } else {
    $answer.addClass('answer-open');
    $answer.slideDown();
     }
 });

 CSS
 .answer {
 font-size: 12px;
 padding: 5px 0px;
 margin-bottom: 15px;
 }
 .answer-open {
 display:none;
 }

 CSSの記述が違う。
 answer-openにdisplay:none;をつけるのではなく、
 answerクラス自体にdisplay:none;をつけておき、
 追加のCSS、display:block;をこのanswerクラスに付け加えたり、外したりするようにする。
 
 そのため、answerクラスにdisplay:none;
 answer-openにdisplay:block;を設定する。

 △の解答
 $('.faq-list-item').click(function(){
 var $answer = $(this).find('.answer'); 
  if($answer.hasClass('answer-open')){
     $answer.removeClass('answer-open');
     $answer.slideUp();
     $(this).find('span').text('+');
    }else {
      $answer.addClass('answer-open');
      $answer.slideDown();
      $(this).find('span').text('-'); }
 });

 CSS
 .answer {
 font-size: 12px;
 padding: 5px 0px;
 margin-bottom: 15px;
 display:none
 }
 .answer-open {
 display:block;
 }

 で、これでもいちを反映されるが、そもそも今回は、回答自体の表示、非表示を
 slideUpとslideDownの動きで切り替えているので、display:block;の設定自体が必要ない。

 answer-openのクラスは、CSSを設定せず、空タグとして使用すればよい。
 プログラムの中で、どういう動きになるかというと
 質問をクリックした際、最初は必ず、answer-openのクラスを持っていないので、
 条件分岐のelse以下からスタートし、
 answer-openのクラスを追加&回答部分が表示されるようにslideDownの動きがつく。
 次に同じ質問をクリックした際には、先程の動きで、answer-openのクラスが追加されているので、
条件分岐、上側のanswer-openクラスを外す&回答部分を隠すslideUpの動きがつく。

 正しい解答
 $('.faq-list-item').click(function(){
 var $answer = $(this).find('.answer');
  if($answer.hasClass('answer-open')){
     $answer.removeClass('answer-open');
     $answer.slideUp();
     $(this).find('span').text('+');
  }else {
     $answer.addClass('answer-open');
     $answer.slideDown();
     $(this).find('span').text('-');
  }
 });

 CSS
 .answer {
 font-size: 12px;
 padding: 5px 0px;
 margin-bottom: 15px;
 display:none
 }

コメントを残す

メールアドレスが公開されることはありません。