質問編集履歴
4
回答から得た解決内容を追記した。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -55,16 +55,7 @@
|
|
|
55
55
|
コード
|
|
56
56
|
|
|
57
57
|
<body>
|
|
58
|
-
<
|
|
58
|
+
<
|
|
59
|
-
<div class="container">
|
|
60
|
-
<div class="header-left">
|
|
61
|
-
<img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
|
|
62
|
-
</div>
|
|
63
|
-
<div class="header-right">
|
|
64
|
-
<div class="login" id="login-show">ログイン</div>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</header>
|
|
68
59
|
<div class="signup-modal-wrapper" id="signup-modal">
|
|
69
60
|
<div class="modal">
|
|
70
61
|
<div class="close-modal">
|
|
@@ -427,4 +418,17 @@
|
|
|
427
418
|
$answerにはopenクラスがないから、hasClassでtrue,falseをそもそも判定できない（trueがない）と考えることしか理解出来ないです。
|
|
428
419
|
次の課題でアコーディオン機能を搭載できるみたいですが、その処理が下画像。
|
|
429
420
|
|
|
430
|
-
この処理全体でなぜできるのかを教えて下さい。
|
|
421
|
+
この処理全体でなぜできるのかを教えて下さい。
|
|
422
|
+
**回答から得た解決内容**
|
|
423
|
+
```
|
|
424
|
+
$('.faq-list-item').click(function(){
|
|
425
|
+
var $answer=$(this).find('.answer');
|
|
426
|
+
if($answer.hasClass('open')){
|
|
427
|
+
$answer.removeClass('open');
|
|
428
|
+
}else{
|
|
429
|
+
$answer.addClass('open');
|
|
430
|
+
}
|
|
431
|
+
});
|
|
432
|
+
```とコードを書き直しクリアできました。
|
|
433
|
+
今回、シングルクォーテーションで囲ってはいけないところを理解出来ました。
|
|
434
|
+
このコードでまだ理解出来ていないところがあるので別質問にします。
|
3
回答を得て、まだ理解出来ずにいる点を追記した。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -53,15 +53,7 @@
|
|
|
53
53
|
```
|
|
54
54
|
```html
|
|
55
55
|
コード
|
|
56
|
-
|
|
56
|
+
|
|
57
|
-
<html>
|
|
58
|
-
<head>
|
|
59
|
-
<meta charset="utf-8">
|
|
60
|
-
<title>Progate</title>
|
|
61
|
-
<link rel="stylesheet" type="text/css" href="stylesheet.css">
|
|
62
|
-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
|
|
63
|
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
64
|
-
</head>
|
|
65
57
|
<body>
|
|
66
58
|
<header>
|
|
67
59
|
<div class="container">
|
|
@@ -429,7 +421,10 @@
|
|
|
429
421
|
display: none;
|
|
430
422
|
}
|
|
431
423
|
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
```
|
|
424
|
+
```
|
|
425
|
+
**回答を得て、まだ理解出来ずにいる点**
|
|
426
|
+
今回のjavascriptコードでアコーディオン機能の準備ができるメカニズムが分からないです。
|
|
427
|
+
$answerにはopenクラスがないから、hasClassでtrue,falseをそもそも判定できない（trueがない）と考えることしか理解出来ないです。
|
|
428
|
+
次の課題でアコーディオン機能を搭載できるみたいですが、その処理が下画像。
|
|
429
|
+
|
|
430
|
+
この処理全体でなぜできるのかを教えて下さい。
|
2
概要欄に詳細画像追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
progateのjquery中級コースを学習しています。
|
|
2
2
|
今やっている課題はclickイベントの中にif文とhasClassメソッドを用いて、アコーディオン機能を作る事を目指したものです。
|
|
3
|
-
addClassやremoveClassも使って。
|
|
3
|
+
addClassやremoveClassも使って。下の画像のFAQにあたるところです。
|
|
4
|
+
](bf4c56d5fbac5319ec011cc07d9ab4e6.png)
|
|
4
5
|
|
|
5
6
|
**わからないところ**
|
|
6
7
|
javascriptのコードで、自分の中では『これでいけたかな』と思い、確認すると変数$answerに対して、hasClassメソッドを用いてくださいと返ってきた。どこをどう直せばいいのか教えて下さい。
|
|
@@ -373,19 +374,7 @@
|
|
|
373
374
|
width: 25%;
|
|
374
375
|
}
|
|
375
376
|
|
|
376
|
-
.lesson-icon {
|
|
377
|
-
position: relative;
|
|
378
|
-
width: 70%;
|
|
379
|
-
margin: 0 auto;
|
|
380
|
-
}
|
|
381
377
|
|
|
382
|
-
.lesson-icon p {
|
|
383
|
-
position: absolute;
|
|
384
|
-
top: 75px;
|
|
385
|
-
width: 100%;
|
|
386
|
-
color: white;
|
|
387
|
-
}
|
|
388
|
-
|
|
389
378
|
.text-contents {
|
|
390
379
|
margin: 3% auto;
|
|
391
380
|
width: 80%;
|
1
自分で調べたリンク先を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
|
|
8
8
|
指示は画像左２つです。
|
|
9
9
|
|
|
10
|
+
調べた事、試したこと
|
|
11
|
+
[リンク内容](https://syncer.jp/accordion-content)
|
|
12
|
+
今回の課題には使えなかった。
|
|
10
13
|
```javascript
|
|
11
14
|
コード
|
|
12
15
|
$(function() {
|