回答編集履歴

1

仕様間違い修正

2015/09/14 02:52

投稿

yotsu
yotsu

スコア35

test CHANGED
@@ -2,78 +2,76 @@
2
2
 
3
3
 
4
4
 
5
- 詳細部分をdisplay:noneにしておいて、
5
+ ※仕様勘違いがあったので直ました。
6
-
7
- もっと見るボタンをクリックされたら、クリックしたボタンに該当する詳細記事を表示
8
6
 
9
7
 
10
8
 
11
- // js部分
9
+ // js部分
12
10
 
13
- $( document ).ready( function(){
11
+ var moreNum = 0; // 現在表示しているmore
14
12
 
15
- // もっと見るボタンクリック
13
+ var lastNum = 3; // 最後のmore
16
14
 
17
- $( ".more_btn" ).click( function(){
15
+ $( document ).ready( function(){
18
16
 
19
- // クリックされたIDを確認
17
+ // もっと見るボタンクリック
20
18
 
21
- var btn_id = $( this ).attr( "id" ).replace( /more_btn_/, "" );
19
+ $( ".more_btn" ).click( function(){
22
20
 
23
- // 対象の詳細記事を開く
21
+ moreNum++;
24
22
 
25
- $( "more_" + btn_id ).slideDown();
23
+ $( "#more_" + moreNum ).slideDown();
26
24
 
27
- // クリックされたボタンを閉じる
25
+ if( lastNum == moreNum ){ // 最後のmoreを開いボタン非表示
28
26
 
29
- $( this ).hide();
27
+ $( ".more_btn" ).hide();
30
28
 
31
- } );
29
+ }
32
30
 
33
- } );
31
+ } );
32
+
33
+ } );
34
34
 
35
35
 
36
36
 
37
37
 
38
38
 
39
- // html部分
39
+ // html部分
40
40
 
41
- <div>
41
+ <div>
42
42
 
43
- <div>
43
+ <div>#データ1#</div>
44
44
 
45
- <div>
46
-
47
- <p>
48
-
49
- <a>
50
-
51
- <img alt="画像が入っています。">
52
-
53
- </a>
54
-
55
- </p>
56
-
57
- <div class="more_btn" id="more_btn_1">もっと見る</div>
58
-
59
- <div id="more_1" style="display:none;">
60
-
61
- <p>
62
-
63
- <span>ラベル(2013/1/1等)</span>
64
-
65
- </p>
66
-
67
- <h3>
68
-
69
- <a>説明文</a>
45
+ <div>#データ2#</div>
70
-
71
- </h3>
72
-
73
- </div>
74
-
75
- </div>
76
-
77
- </div>
78
46
 
79
47
  </div>
48
+
49
+ <div id="more_1" style="display:none;">
50
+
51
+ <div>#データ3#</div>
52
+
53
+ <div>#データ4#</div>
54
+
55
+ </div>
56
+
57
+ <div id="more_2" style="display:none;">
58
+
59
+ <div>#データ5#</div>
60
+
61
+ <div>#データ6#</div>
62
+
63
+ </div>
64
+
65
+ <div id="more_3" style="display:none;">
66
+
67
+ <div>#データ7#</div>
68
+
69
+ <div>#データ8#</div>
70
+
71
+ </div>
72
+
73
+
74
+
75
+ <div class="more_btn">もっと見る</div>
76
+
77
+