質問編集履歴
1
CSSの追加、タグの追加 参考サイトの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
何日も悩んでしまい解決できないため、教えていただきたいです。
|
|
3
3
|
|
|
4
4
|
ボタンを押したら残りを表示するというのを三箇所で実施したいです。
|
|
5
|
+
以下のサイトを参考にしました。
|
|
6
|
+
https://codepen.io/m_t_of/pen/YaROLY
|
|
5
7
|
|
|
8
|
+
|
|
6
9
|
上の二つは問題なく表示されるのですが、
|
|
7
10
|
最後のが、ボタンが表示されず困っています。
|
|
8
11
|
|
|
@@ -57,9 +60,13 @@
|
|
|
57
60
|
|
|
58
61
|
|
|
59
62
|
```
|
|
63
|
+
```css
|
|
64
|
+
.is-hidden {
|
|
65
|
+
display: none;
|
|
66
|
+
}
|
|
67
|
+
```
|
|
60
68
|
|
|
61
|
-
|
|
62
|
-
###
|
|
69
|
+
###
|
|
63
70
|
```js
|
|
64
71
|
var item = $('.list_toggle').children('li');
|
|
65
72
|
var listbtn = $('.moremore');
|
|
@@ -187,7 +194,7 @@
|
|
|
187
194
|
|
|
188
195
|
var item = $('.part_toggle').children('li');
|
|
189
196
|
var partbtn = $('.partmore');
|
|
190
|
-
var
|
|
197
|
+
var className = "is-hidden";
|
|
191
198
|
|
|
192
199
|
|
|
193
200
|
var itemsList = function () {
|
|
@@ -207,10 +214,10 @@
|
|
|
207
214
|
|
|
208
215
|
$(item).each(function () {
|
|
209
216
|
if (addCount === 3) {
|
|
210
|
-
$(this).addClass(
|
|
217
|
+
$(this).addClass(className);
|
|
211
218
|
return;
|
|
212
219
|
}
|
|
213
|
-
if (!$(this).hasClass(
|
|
220
|
+
if (!$(this).hasClass(className)) {
|
|
214
221
|
addCount++;
|
|
215
222
|
}
|
|
216
223
|
});
|
|
@@ -222,9 +229,9 @@
|
|
|
222
229
|
//もっと見るボタンをクリックで2個ずつ表示
|
|
223
230
|
(function () {
|
|
224
231
|
$(partbtn).on('click', function () {
|
|
225
|
-
var
|
|
232
|
+
var hiddenLength = $('.part_toggle').children('li.is-hidden').length; //非表示のリスト数
|
|
226
233
|
|
|
227
|
-
if (
|
|
234
|
+
if (hiddenLength === 0) {
|
|
228
235
|
return; //非表示のものが無ければ何もしない
|
|
229
236
|
}
|
|
230
237
|
|
|
@@ -234,17 +241,17 @@
|
|
|
234
241
|
return; //3個ずつ表示（3個まで表示したら処理をやめる）
|
|
235
242
|
}
|
|
236
243
|
|
|
237
|
-
if ($(this).hasClass(
|
|
244
|
+
if ($(this).hasClass(className)) {
|
|
238
245
|
var hiddenLength = $('.part_toggle').children('li.is-hidden').length; //非表示のリスト数
|
|
239
|
-
$(this).removeClass(
|
|
246
|
+
$(this).removeClass(className);
|
|
240
247
|
moreCount++;
|
|
241
248
|
}
|
|
242
249
|
|
|
243
250
|
//全部表示したらボタン削除
|
|
244
|
-
if (
|
|
251
|
+
if (hiddenLength === 1) {
|
|
245
252
|
$(partbtn).hide();
|
|
246
253
|
}
|
|
247
254
|
});
|
|
248
255
|
});
|
|
249
|
-
|
|
256
|
+
|
|
250
257
|
```
|