toggleClassが動かない

Question

FAQ記事のコーディングをしています。

質問文をクリックすると答え文が表示されるようtoggleClassでshowクラスが追加されると
表示されるようにしたいのですがうまくいきません。addClassでshowクラスの追加はできるのですがtoggleClassにするとshowクラスが追加されません。

どこが問題なのでしょうか？

<ul>
 <li class="question">XXXXXXXXXXXXXXXXXX?</li>
 <li class="answer">XXXXXXXXXXXXXXXXXXXXXX</li>
</ul>

.answer {
      display:none
 }

.answer.show {
      display:block;
 }

 $('.question').each(function () {
        $('.question').on('click', function () {
            $(this).next('.answer').toggleClass('show');
        });
    })

Answer 1

<style>
.answer {display:none}
.answer.show {display:list-item;}
</style>
<script>
$(function(){
  $('.question').on('click',function(){
    $(this).next('.answer').toggleClass('show');
  });
});
</script>
<ul>
<li class="question">q1</li>
<li class="answer">a1</li>
</ul>
<ul>
<li class="question">q2</li>
<li class="answer">a2</li>
</ul>
<ul>
<li class="question">q3</li>
<li class="answer">a3</li>
</ul>

Comments

[flower_tako]

ありがとうございます。表示非表示を切り替えることができました。

しかし、なぜ
.each(function () {
}
を使うとうまくいかなくなるのでしょうか？

[yambejp]

eachでやるなら
$(function(){
$('.question').each(function(){
$(this).on('click',function(){
$(this).next('.answer').toggleClass('show');
});
});
});

しかしjQueryは集合に対して一括で処理ができるので
eachを使う意味がありません

[yambejp]

ちなみに
$('.question').each(function(){
$('.question').on('click',function(){
$(this).next('.answer').toggleClass('show');
});
});
とすると.questionに対して.questionの出現回数かいclickの処理が
発生するので、.questionが偶数だとtoggleのよりon/offが発生し
最終的にはoffが有効になります

[flower_tako]

回答ありがとうございます。
eachを使うとquestionのひとつひとつに処理をしているのかと思っておりましたが
('.question')の集合に処理を行なっているのですね！

大変勉強になりました。ありがとうございます。