jQuery Progateの課題

質問

ProgateのjQuery中級をやっています。FAQの質問をクリックすると答えが出てくるというものを作成しています。

解説通りにやってみて完成はしたのですが、
if文の中にある('open')というクラスはCSSの中に存在しません。

元々存在しない（'open'）クラスを探して削除したり、加えたりする意味がわかりかねます。
例えばdisplay:none;などで非表示にしていたものに以下のようなCSSを加えるのであればまだなんとなく意味が理解できます。

.open{
display:block;
}

しかし、CSS内にクラス('open')は存在しません。
まだ初心者です。分かりやすく解説していただけると助かります。
よろしくお願いいたします。

if($answer.hasClass('open')) {

$answer.removeClass('open');
……
else {
$answer.addClass('open');
……

jQuery
---------------------------------------

// FAQのアコーディオン
$('.faq-list-item').click(function() {

var $answer = $(this).find('.answer');

if($answer.hasClass('open')) {

$answer.removeClass('open');

// slideUpメソッドを用いて、$answerを隠してください
$answer.slideUp();

// 子要素のspanタグの中身をtextメソッドを用いて書き換えてください

$(this).find('span').text('+');

} else {
$answer.addClass('open');

// slideDownメソッドを用いて、$answerを表示してください
$answer.slideDown();

// 子要素のspanタグの中身をtextメソッドを用いて書き換えてください

$(this).find('span').text('-');
}
});
---------------------------------------

HTML
---------------------------------------
<h2>FAQ</h2>
</div>
<div class="faq">
<ul id="faq-list">
<li class="faq-list-item">
<h3 class="question">Progateの公式キャラクターはなんですか？</h3>
<span>+</span>
<div class="answer">
<p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>
</div>
</li>
<li class="faq-list-item">
<h3 class="question">にんじゃわんこはオスですか？それともメスですか？</h3>
<span>+</span>
<div class="answer">
<p>にんじゃわんこはオスです。</p>
</div>
</li>
<li class="faq-list-item">
<h3 class="question">にんじゃわんこは何歳ですか？</h3>
<span>+</span>
<div class="answer">
<p>にんじゃわんこは14歳です。</p>
</div>
</li>
</ul>
</div>

---------------------------------------

CSS
---------------------------------------

#faq-list {
width: 500px;
margin: 0 auto;
padding: 0;
list-style: none;
}

/*アコーディオン追加 */
.faq-list-item {
margin:10px;
border-bottom:1px solid #ccc;
position:relative;
cursor:pointer;
text-align: left;
}

.faq-list-item h3 {
font-size: 14px;
}

.faq-list-item span {
position:absolute;
top:0;
right:5px;
color:#ccc;
font-size:13px;
}

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

回答No.1

Proof4 · ベストアンサー

クラス名openは、何らかのスタイルを適用するためではなく、答えの要素が開いているかどうかを判定するためだけに利用されています。

答えの要素の状態が分かっていなければ、クリックされたときに行う動作を決められません。この場合は、クリックされたときに答えの要素が「閉じていたら開く」か「開いていたら閉じる」のいずれかの動作を、答えの要素の状態（つまりopenクラスの有無）によって条件分岐して実行しています。

お礼

このような使い方があるのですね。大変勉強になりました。どうもありがとうございました。