teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【jQuery】クリック時の要素の回転について

編集履歴

質問編集履歴

3

レイアウト修正

2019/03/17 10:45

投稿

unee
unee

スコア17

test CHANGED
File without changes
test CHANGED
@@ -34,202 +34,208 @@
34
34
 
35
35
  また、今書いているコードと組み合わせる方法が分からないです。
36
36
 
37
+
38
+
39
+ ### HTML
40
+
41
+
42
+
43
+ ```ここに言語を入力
44
+
45
+ <ul class="accordion">
46
+
47
+ <li>
48
+
49
+ <p class="ac arrow">アコーディオン１</p>
50
+
51
+ <ul class="inner">
52
+
53
+ <li class="content1">コンテンツ</li>
54
+
55
+ <li class="content1">コンテンツ２</li>
56
+
57
+ <li class="content1">コンテンツ３</li>
58
+
59
+ <li><span class="close">閉じる</span></li>
60
+
61
+ </ul>
62
+
63
+ </li>
64
+
65
+ <li>
66
+
67
+ <p class="ac arrow">アコーディオン２</p>
68
+
69
+ <ul class="inner">
70
+
71
+ <li class="content1">コンテンツ</li>
72
+
73
+ <li class="content1">コンテンツ２</li>
74
+
75
+ <li class="content1">コンテンツ３</li>
76
+
77
+ <li><span class="close">閉じる</span></li>
78
+
79
+ </ul>
80
+
81
+ </li>
82
+
83
+ <li>
84
+
85
+ <p class="ac arrow">アコーディオン３</p>
86
+
87
+ <ul class="inner">
88
+
89
+ <li class="content1">コンテンツ</li>
90
+
91
+ <li class="content1">コンテンツ２</li>
92
+
93
+ <li class="content1">コンテンツ３</li>
94
+
95
+ <li><span class="close">閉じる</span></li>
96
+
97
+ </ul>
98
+
99
+ </li>
100
+
101
+ </ul>
102
+
37
103
  ```
38
104
 
105
+
106
+
39
- エラーメッセージ
107
+ ### jQuery
108
+
109
+
110
+
111
+ ```ここに言語を入力
112
+
113
+ $(function(){
114
+
115
+ $('.accordion p').click(function(){
116
+
117
+ $(this).next('.accordion .inner').slideToggle();
118
+
119
+ $('.accordion p').not($(this)).next('.accordion .inner').slideUp();
120
+
121
+ });
122
+
123
+ $('.close').click(function () {
124
+
125
+ $(this).parents('.accordion .inner').slideUp();
126
+
127
+ });
128
+
129
+ });
130
+
131
+
40
132
 
41
133
  ```
42
134
 
43
-
44
-
45
- ### HTML
46
-
47
-
48
-
49
- <ul class="accordion">
50
-
51
- <li>
52
-
53
- <p class="ac arrow">アコーディオン１</p>
54
-
55
- <ul class="inner">
56
-
57
- <li class="content1">コンテンツ</li>
58
-
59
- <li class="content1">コンテンツ２</li>
60
-
61
- <li class="content1">コンテンツ３</li>
62
-
63
- <li><span class="close">閉じる</span></li>
64
-
65
- </ul>
66
-
67
- </li>
68
-
69
- <li>
70
-
71
- <p class="ac arrow">アコーディオン２</p>
72
-
73
- <ul class="inner">
74
-
75
- <li class="content1">コンテンツ</li>
76
-
77
- <li class="content1">コンテンツ２</li>
78
-
79
- <li class="content1">コンテンツ３</li>
80
-
81
- <li><span class="close">閉じる</span></li>
82
-
83
- </ul>
84
-
85
- </li>
86
-
87
- <li>
88
-
89
- <p class="ac arrow">アコーディオン３</p>
90
-
91
- <ul class="inner">
92
-
93
- <li class="content1">コンテンツ</li>
94
-
95
- <li class="content1">コンテンツ２</li>
96
-
97
- <li class="content1">コンテンツ３</li>
98
-
99
- <li><span class="close">閉じる</span></li>
100
-
101
- </ul>
102
-
103
- </li>
104
-
105
- </ul>
106
-
107
-
108
-
109
- ### jQuery
135
+ ### CSS
136
+
137
+ ```ここに言語を入力
138
+
139
+ /*デザイン*/
140
+
141
+ ul{
142
+
143
+ list-style: none;
144
+
145
+ }
146
+
147
+ .accordion {
148
+
149
+ text-align: center
150
+
151
+ ;}
152
+
153
+ .accordion .inner {
154
+
155
+ display: none;
156
+
157
+ }
158
+
159
+ .accordion p{
160
+
161
+ cursor: pointer; padding: 10px;
162
+
163
+ }
164
+
165
+ .accordion p.ac{
166
+
167
+ background: #ccc;
168
+
169
+ }
170
+
171
+ .accordion .inner li{
172
+
173
+ padding: 10px 0;
174
+
175
+ position: relative;
176
+
177
+ }
178
+
179
+ .accordion .inner li .close{
180
+
181
+ padding: 4px 5px ;
182
+
183
+ background: #fff;
184
+
185
+ border:1px solid #f0f0f0;
186
+
187
+ border-radius: 10px;
188
+
189
+ position:absolute;
190
+
191
+ top:6px;
192
+
193
+ right: 10px;
194
+
195
+ font-size: 14px;
196
+
197
+ cursor: pointer;
198
+
199
+ }
200
+
201
+ .accordion .inner li.content1{
202
+
203
+ background: #fff;
204
+
205
+ }
206
+
207
+
208
+
209
+ /*三角　イロイロ試した痕跡*/
210
+
211
+ .arrow:after{
212
+
213
+ content: "▼";
214
+
215
+ }
216
+
217
+ .arrow02{
218
+
219
+ content: "▲";
220
+
221
+ }
222
+
223
+ ```
224
+
225
+ ### 試したこと
110
226
 
111
227
 
112
228
 
113
229
  $(function(){
114
230
 
115
- $('.accordion p').click(function(){
231
+ $('.accordion p','.close').click(function(){
116
-
117
- $(this).next('.accordion .inner').slideToggle();
232
+
118
-
119
- $('.accordion p').not($(this)).next('.accordion .inner').slideUp();
120
-
121
- });
122
-
123
- $('.close').click(function () {
233
+ $(this).toggleClass(“.arrow02”);
124
-
125
- $(this).parents('.accordion .inner').slideUp();
126
-
127
- });
128
234
 
129
235
  });
130
236
 
131
-
132
-
133
- ### CSS
134
-
135
- /*デザイン*/
136
-
137
- ul{
138
-
139
- list-style: none;
140
-
141
- }
142
-
143
- .accordion {
144
-
145
- text-align: center
146
-
147
- ;}
148
-
149
- .accordion .inner {
150
-
151
- display: none;
152
-
153
- }
154
-
155
- .accordion p{
156
-
157
- cursor: pointer; padding: 10px;
158
-
159
- }
160
-
161
- .accordion p.ac{
162
-
163
- background: #ccc;
164
-
165
- }
166
-
167
- .accordion .inner li{
168
-
169
- padding: 10px 0;
170
-
171
- position: relative;
172
-
173
- }
174
-
175
- .accordion .inner li .close{
176
-
177
- padding: 4px 5px ;
178
-
179
- background: #fff;
180
-
181
- border:1px solid #f0f0f0;
182
-
183
- border-radius: 10px;
184
-
185
- position:absolute;
186
-
187
- top:6px;
188
-
189
- right: 10px;
190
-
191
- font-size: 14px;
192
-
193
- cursor: pointer;
194
-
195
- }
196
-
197
- .accordion .inner li.content1{
198
-
199
- background: #fff;
200
-
201
- }
202
-
203
-
204
-
205
- /*三角　イロイロ試した痕跡*/
206
-
207
- .arrow:after{
208
-
209
- content: "▼";
210
-
211
- }
212
-
213
- .arrow02{
214
-
215
- content: "▲";
216
-
217
- }
218
-
219
- ### 試したこと
220
-
221
-
222
-
223
- $(function(){
224
-
225
- $('.accordion p','.close').click(function(){
226
-
227
- $(this).toggleClass(“.arrow02”);
228
-
229
237
  });
230
238
 
231
- });
232
-
233
239
 
234
240
 
235
241
  上記を新たに追加してみたりしておりました。

2

誤字

2019/03/17 10:45

投稿

unee
unee

スコア17

test CHANGED
File without changes
test CHANGED
File without changes

1

誤字

2019/03/17 10:40

投稿

unee
unee

スコア17

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,5 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- 後ほど追記します。。。。
4
-
5
3
  jQueryを使用してアコーディオンメニューを作成しております。
6
4
 
7
5