こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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;
}
---------------------------------------

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2020-05-17 22:49:13

QNo.9749868

困ってます

質問者が選んだベストアンサー

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

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

投稿日時 - 2020-05-18 10:39:34

お礼

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

投稿日時 - 2020-05-19 20:47:04

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問