teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問選択式のアコーディオンメニューを実装したい

編集履歴

質問編集履歴

2

css追加

2020/09/23 16:40

投稿

otyatya_no_tya
otyatya_no_tya

スコア10

test CHANGED
File without changes
test CHANGED
@@ -56,19 +56,75 @@
56
56
 
57
57
  <div class="modal_inner">
58
58
 
59
-
60
59
 
60
+
61
- <p class="modal_inner_txt">選択してください</p>
61
+ <p class="modal_inner_txt">選択してください</p>
62
62
 
63
63
 
64
64
 
65
- <div class="modal_inner_flex">
65
+ <div class="modal_inner_flex">
66
66
 
67
- <p class="modal_inner_radius yes">はい</p>
67
+ <p class="modal_inner_radius yes">はい</p>
68
68
 
69
- <p class="modal_inner_radius">いいえ</p>
69
+ <section>
70
70
 
71
+ <div class="text">
72
+
73
+ はいを選択した時の文章
74
+
71
- </div>
75
+ </div>
76
+
77
+ </section>
78
+
79
+ <p class="modal_inner_radius">いいえ</p>
80
+
81
+ <section>
82
+
83
+ <div class="text">
84
+
85
+ いいえを選択した時の文章
86
+
87
+ </div>
88
+
89
+ </section>
90
+
91
+ </div>
92
+
93
+
94
+
95
+ </div>
96
+
97
+ ```
98
+
99
+
100
+
101
+ ```css
102
+
103
+
104
+
105
+ .modal_inner_flex {
106
+
107
+ display: flex;
108
+
109
+ }
110
+
111
+
112
+
113
+ .modal_inner_radius {
114
+
115
+ margin: 10px;
116
+
117
+ }
118
+
119
+
120
+
121
+ .text {
122
+
123
+ display: none;
124
+
125
+ }
126
+
127
+
72
128
 
73
129
  ```
74
130
 
@@ -88,7 +144,7 @@
88
144
 
89
145
  // メニュー表示/非表示
90
146
 
91
- $(this).next('ul').slideToggle('fast');
147
+ $(this).next('section').slideToggle('fast');
92
148
 
93
149
  });
94
150
 
@@ -100,7 +156,7 @@
100
156
 
101
157
  // メニュー表示/非表示
102
158
 
103
- $(this).children('ul').slideToggle('fast');
159
+ $(this).children('.text').slideToggle('fast');
104
160
 
105
161
  e.stopPropagation();
106
162
 

1

不足分追加

2020/09/23 16:40

投稿

otyatya_no_tya
otyatya_no_tya

スコア10

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- ただこのスクリプトだと .yesを選択できないので困っています
39
+ ただこのスクリプトだと .yes .noを選択できないので困っています
40
40
 
41
41
 
42
42
 
@@ -56,11 +56,9 @@
56
56
 
57
57
  <div class="modal_inner">
58
58
 
59
- <p class="selfWalk_title">参加の手順</p>
59
+
60
60
 
61
-
62
-
63
- <p class="modal_inner_txt have_sp">選択してください</p>
61
+ <p class="modal_inner_txt">選択してください</p>
64
62
 
65
63
 
66
64
 
@@ -76,31 +74,7 @@
76
74
 
77
75
 
78
76
 
79
- ```css
80
77
 
81
- ul {
82
-
83
- display: none;
84
-
85
- }
86
-
87
-
88
-
89
- span {
90
-
91
- cursor: pointer;
92
-
93
- }
94
-
95
-
96
-
97
- li {
98
-
99
- cursor: pointer;
100
-
101
- }
102
-
103
- ```
104
78
 
105
79
 
106
80
 
@@ -122,7 +96,7 @@
122
96
 
123
97
  // 子メニュー処理
124
98
 
125
- $('li').click(function(e) {
99
+ $('.yes .no').click(function(e) {
126
100
 
127
101
  // メニュー表示/非表示
128
102