質問編集履歴

2

修正ソースを追加

2018/01/23 03:44

投稿

junannko
junannko

スコア18

test CHANGED
File without changes
test CHANGED
@@ -173,3 +173,27 @@
173
173
  ```
174
174
 
175
175
  何卒よろしくお願いいたします。
176
+
177
+
178
+
179
+
180
+
181
+ 修正ソース01
182
+
183
+ ```js
184
+
185
+ <script>
186
+
187
+ $('.confilm-table-btn').click(function () {
188
+
189
+ var index = $('.confilm-table-btn').index(this);
190
+
191
+ $('.confilm-tables').eq(index).slideToggle(500);
192
+
193
+ $('.confilm-table-btn').eq(index).toggleClass('confilm-table-btn-on');
194
+
195
+ });
196
+
197
+ </script>
198
+
199
+ ```

1

ソースを編集

2018/01/23 03:44

投稿

junannko
junannko

スコア18

test CHANGED
File without changes
test CHANGED
@@ -36,47 +36,107 @@
36
36
 
37
37
  ```html
38
38
 
39
- <div class="aaa">
39
+ <!-- =====1個目 start===== -->
40
40
 
41
- <ul>
41
+ <div class="content">
42
42
 
43
- <li><a href="#" class="confilm-table-btn">ここをクリックで開くようにしたい</a></li>
43
+ <div class="menu-block">
44
44
 
45
+ <ul>
46
+
47
+ <li><a href="#" class="confilm-table-btn">ここをクリックで開くようにしたい</a></li>
48
+
45
- </ul>
49
+ </ul>
50
+
51
+ </div>
52
+
53
+
54
+
55
+ <!--以下をアコーディオンで表示-->
56
+
57
+ <div class="confilm-tables">
58
+
59
+ <table>
60
+
61
+ <tr>
62
+
63
+ <th>テーブル</th>
64
+
65
+ <td>テーブル</td>
66
+
67
+ </tr>
68
+
69
+ </table>
70
+
71
+ <table>
72
+
73
+ <tr>
74
+
75
+ <th>テーブル</th>
76
+
77
+ <td>テーブル</td>
78
+
79
+ </tr>
80
+
81
+ </table>
82
+
83
+ </div>
46
84
 
47
85
  </div>
48
86
 
87
+ <!-- =====1個目 end===== -->
49
88
 
50
89
 
51
- <!--以下をアコーディオンで表示-->
52
90
 
53
- <div class="confilm-tables">
91
+ <!-- =====2個目 start===== -->
54
92
 
55
- <table>
93
+ <div class="content">
56
94
 
57
- <tr>
95
+ <div class="menu-block">
58
96
 
59
- <th>テーブル</th>
97
+ <ul>
60
98
 
61
- <td>テーブル</td>
99
+ <li><a href="#" class="confilm-table-btn">ここをクリックで開くようにしたい</a></li>
62
100
 
63
- </tr>
101
+ </ul>
64
102
 
65
- </table>
103
+ </div>
66
104
 
67
- <table>
105
+
68
106
 
69
- <tr>
107
+ <!--以下をアコーディオンで表示-->
70
108
 
71
- <th>テーブル</th>
109
+ <div class="confilm-tables">
72
110
 
73
- <td>テーブル</td>
111
+ <table>
74
112
 
75
- </tr>
113
+ <tr>
76
114
 
115
+ <th>テーブル</th>
116
+
117
+ <td>テーブル</td>
118
+
119
+ </tr>
120
+
77
- </table>
121
+ </table>
122
+
123
+ <table>
124
+
125
+ <tr>
126
+
127
+ <th>テーブル</th>
128
+
129
+ <td>テーブル</td>
130
+
131
+ </tr>
132
+
133
+ </table>
134
+
135
+ </div>
78
136
 
79
137
  </div>
138
+
139
+ <!-- =====2個目 end===== -->
80
140
 
81
141
  ```
82
142
 
@@ -86,25 +146,27 @@
86
146
 
87
147
  <script>
88
148
 
89
- $('.confilm-table-btn').click(function() {
149
+ $('.confilm-table-btn').click(function () {
90
150
 
91
- if ($('.confilm-tables').css('display') == 'none') {
151
+ if ($('.confilm-tables').css('display') == 'none') {
92
152
 
93
- $(this).next('.confilm-tables').slideDown(500);
153
+ var index = $('.confilm-table-btn').index(this);//追加
94
154
 
95
- $(this).next('.confilm-table-btn').addClass('confilm-table-btn-on');
155
+ $('.confilm-tables').eq(index).slideDown(500);//追加
96
156
 
97
- $(this).next('.confilm-table-btn').removeClass('confilm-table-btn-off');
157
+ $('.confilm-table-btn').addClass('confilm-table-btn-on');
98
158
 
99
- } else {
159
+ $('.confilm-table-btn').removeClass('confilm-table-btn-off');
100
160
 
101
- $(this).next('.confilm-tables').slideUp(500);
161
+ } else {
102
162
 
103
- $(this).next('.confilm-table-btn').addClass('confilm-table-btn-off');
163
+ $('.confilm-tables').slideUp(500);
104
164
 
105
- }
165
+ $('.confilm-table-btn').addClass('confilm-table-btn-off');
106
166
 
167
+ }
168
+
107
- });
169
+ });
108
170
 
109
171
  </script>
110
172