teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ページ内アンカーリンクでアコーディオンを開きたい

編集履歴

質問編集履歴

4

文言修正

2020/07/17 14:41

投稿

okama
okama

スコア22

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,8 @@
1
1
  ページ内のアンカーリンク(href="#article")をクリックすると
2
2
 
3
- スムーススクロールで[id="article"]に移動し、アコーディオンが開くという動きを実装したいです。
3
+ [id="article"]に移動し、アコーディオンが開くという動きを実装したいです。
4
+
5
+ (アコーディオンが先でもアンカーが先でも大丈夫です！)
4
6
 
5
7
 
6
8
 

3

jsを変更しました

2020/07/17 14:41

投稿

okama
okama

スコア22

test CHANGED
File without changes
test CHANGED
@@ -138,41 +138,53 @@
138
138
 
139
139
  ```
140
140
 
141
+
142
+
143
+
144
+
141
145
  ### js
142
146
 
143
147
  ```ここに言語を入力
144
148
 
149
+ $(function () {
145
150
 
151
+ $(".fee_article_title").click(function () {
152
+
153
+ $(this).toggleClass("open").next().slideToggle("normal");
154
+
155
+ });
156
+
157
+ });
146
158
 
147
159
 
148
160
 
149
161
  $(function () {
150
162
 
151
- 　　$('.fee_inner01 a[href^="#"]').click(function () {
163
+ $('.fee_article_in').css("display", "none");
152
164
 
153
- 　　　　$(".fee_article_title").addClass("open");
165
+ $('.fee_inner01 a[href^="#"]').click(function () {
154
166
 
155
- 　　　　$(".fee_article_in").css("display","block");
167
+ $(".fee_article_title").addClass("open");
156
168
 
157
- 　　　　var speed = 500;
169
+ $(".fee_article_in").css("display", "block");
158
170
 
159
- 　　　　var href= $(this).attr("href");
171
+ var speed02 = 500;
160
172
 
161
- 　　　　var target = $(href == "#" || href == "" ? 'html' : href);
173
+ var href02 = $(this).attr("href");
162
174
 
163
- 　　　　var position = target.offset().top;
175
+ var target02 = $(href02 == "#" || href02 == "" ? 'html' : href02);
164
176
 
165
- 　　　　$("html, body").animate({scrollTop:position}, speed, "swing");
177
+ var position02 = target02.offset().top;
166
178
 
167
- 　　　　return false;
179
+ $("html, body").animate({
168
180
 
169
- 　　});
181
+ scrollTop: position02
170
182
 
171
- 　　$(".fee_article_title").click(function () {
183
+ }, speed02, "swing");
172
184
 
173
- 　　　　$(this).toggleClass("open").next().slideToggle("normal");
185
+ return false;
174
186
 
175
- 　　});
187
+ });
176
188
 
177
189
  });
178
190
 

2

jsを修正しました

2020/07/17 14:40

投稿

okama
okama

スコア22

test CHANGED
File without changes
test CHANGED
@@ -144,23 +144,35 @@
144
144
 
145
145
 
146
146
 
147
- $(function(){
148
147
 
149
- $('.fee_article_in').hide();
150
148
 
151
- $('.fee_inner01 a[href^="#"]').on('click', function() {
149
+ $(function () {
152
150
 
153
- $('.fee_article_title').addClass('open');
151
+ 　　$('.fee_inner01 a[href^="#"]').click(function () {
154
152
 
155
- $(this).attr('href').next('.fee_article_in').show();
153
+ 　　　　$(".fee_article_title").addClass("open");
156
154
 
157
- });
155
+ 　　　　$(".fee_article_in").css("display","block");
158
156
 
159
- $(".fee_article_title").click(function () {
157
+ 　　　　var speed = 500;
160
158
 
161
- $(this).toggleClass("open").next().slideToggle("normal");
159
+ 　　　　var href= $(this).attr("href");
162
160
 
161
+ 　　　　var target = $(href == "#" || href == "" ? 'html' : href);
162
+
163
+ 　　　　var position = target.offset().top;
164
+
165
+ 　　　　$("html, body").animate({scrollTop:position}, speed, "swing");
166
+
167
+ 　　　　return false;
168
+
163
- });
169
+ 　　});
170
+
171
+ 　　$(".fee_article_title").click(function () {
172
+
173
+ 　　　　$(this).toggleClass("open").next().slideToggle("normal");
174
+
175
+ 　　});
164
176
 
165
177
  });
166
178
 

1

補足

2020/07/17 11:10

投稿

okama
okama

スコア22

test CHANGED
File without changes
test CHANGED
@@ -1,40 +1,28 @@
1
1
  ページ内のアンカーリンク(href="#article")をクリックすると
2
2
 
3
- スムーススクロールで[id="article"]に移動し、
3
+ スムーススクロールで[id="article"]に移動し、アコーディオンが開くという動きを実装したいです。
4
-
5
- アコーディオンが開く
6
4
 
7
5
 
8
6
 
7
+ アコーディオン部分はアンカーでも開くし、アコーディオン自体のクリックでも開くようにしたいです。
8
+
9
- という動きを実装したいです。
9
+ 開閉をわかりやすくしたのでアコーディオン右には画像で+/-もつけています。
10
10
 
11
11
 
12
12
 
13
- 下記の記述でローカル上、動作確認ができたのですが、
13
+ ページ内に他にもアンカーリンクを利用するため
14
14
 
15
- 本番環境にUPされたアンカーリンクをクリックすると
15
+ ユニークな記述をお願いします。
16
16
 
17
17
 
18
18
 
19
- <li>＊1<a href="#article" id="article-anc_01">見出し01</a></li>
19
+ 下記の記述でアコーディオンだけの開閉は問題ありませんが
20
20
 
21
- →
22
-
23
- <li>＊1<a href="https://●●●/index.html?ancr=●●●●#article" id="#article-anc_01">見出し01</a></li>
21
+ アンカーを押してもアコーディオンが開きませんでした。
24
22
 
25
23
 
26
24
 
27
- のようにhrefの記述がおかしくなり、
28
-
29
- ページが再読み込みのようになり、アコーディオンも動作しません。
30
-
31
-
32
-
33
- ・下記の記述だとどこが問題あるでしょうか。
25
+ どこの記述が問題ありますでしょうか。。
34
-
35
- ・この記述の他にもっといい書き方があれば教えていただきたいです。
36
-
37
- ・ローカル環境だけ動くのは何故かわかりますでしょうか？
38
26
 
39
27
 
40
28
 
@@ -48,15 +36,11 @@
48
36
 
49
37
  <ul>
50
38
 
51
- <li>＊1<a href="#article" id="article-anc_01">見出し01</a></li>
39
+ <li>＊1<a href="#article" id="article-anc_01" class="fee_article_btn">見出し01</a></li>
52
40
 
53
- <li>＊2 <a href="#article" id="article-anc_02">見出し02</a></li>
41
+ <li>＊2 <a href="#article" id="article-anc_02" class="fee_article_btn">見出し02</a></li>
54
42
 
55
- <li>＊3 <a href="#article" id="article-anc_03">見出し03</a></li>
43
+ <li>＊3 <a href="#article" id="article-anc_03" class="fee_article_btn">見出し03</a></li>
56
-
57
- <li>＊4<a href="#article" id="article-anc_04">見出し04</a></li>
58
-
59
- <li>＊5<a href="#article" id="article-anc_05">見出し05</a></li>
60
44
 
61
45
  </ul>
62
46
 
@@ -74,10 +58,6 @@
74
58
 
75
59
  <p>＊3　テキストが入ります</p>
76
60
 
77
- <p>＊4　テキストが入ります</p>
78
-
79
- <p>＊5　テキストが入ります</p>
80
-
81
61
  </div>
82
62
 
83
63
  </div>
@@ -86,72 +66,102 @@
86
66
 
87
67
  ```
88
68
 
69
+ ### css
70
+
71
+ ```ここに言語を入力
72
+
73
+ .fee_article_top ul {
74
+
75
+ padding: 12px;
76
+
77
+ margin: 15px 0 20px;
78
+
79
+ position: relative;
80
+
81
+ }
82
+
83
+ .fee_article_in {
84
+
85
+ padding: 0 5% 20px;
86
+
87
+ }
88
+
89
+ .ac_btn {
90
+
91
+ position: relative;
92
+
93
+ }
94
+
95
+ .ac_btn::after {
96
+
97
+ content: "";
98
+
99
+ display: inline-block;
100
+
101
+ width: 18px;
102
+
103
+ height: 18px;
104
+
105
+ background: url(../images/ac_plus.png) no-repeat;
106
+
107
+ background-size: 18px;
108
+
109
+ position: absolute;
110
+
111
+ right: 20px;
112
+
113
+ top: 16px;
114
+
115
+ }
116
+
117
+ .ac_btn.open::after {
118
+
119
+ content: "";
120
+
121
+ display: inline-block;
122
+
123
+ width: 18px;
124
+
125
+ height: 18px;
126
+
127
+ background: url(../images/ac_minus.png) no-repeat;
128
+
129
+ background-size: 18px;
130
+
131
+ position: absolute;
132
+
133
+ right: 20px;
134
+
135
+ top: 16px;
136
+
137
+ }
138
+
139
+ ```
140
+
89
141
  ### js
90
142
 
91
143
  ```ここに言語を入力
92
144
 
93
- //アンカー共通
145
+
94
146
 
95
147
  $(function(){
96
148
 
97
- $('a[href^="#"]').click(function(){
149
+ $('.fee_article_in').hide();
98
150
 
99
- var speed = 500;
151
+ $('.fee_inner01 a[href^="#"]').on('click', function() {
100
152
 
101
- var href= $(this).attr("href");
153
+ $('.fee_article_title').addClass('open');
102
154
 
103
- var target = $(href == "#" || href == "" ? 'html' : href);
155
+ $(this).attr('href').next('.fee_article_in').show();
104
156
 
105
- var position = target.offset().top;
157
+ });
106
158
 
107
- $("html, body").animate({scrollTop:position}, speed, "swing");
159
+ $(".fee_article_title").click(function () {
108
160
 
109
- return false;
161
+ $(this).toggleClass("open").next().slideToggle("normal");
110
162
 
111
163
  });
112
164
 
113
165
  });
114
166
 
115
-
116
-
117
- //アコーディオン共通
118
-
119
- $(function(){
120
-
121
- $(".accordion_in").css("display","none");
122
-
123
- $(".article_title, .fee_article_title").click(function(){
124
-
125
- $(this).toggleClass("open").next().slideToggle("normal");
126
-
127
- });
128
-
129
- });
130
-
131
-
132
-
133
- $(function(){
134
-
135
- 　$('a[href^="#article"]').click(function(){
136
-
137
- 　$(".fee_inner01 .fee_article_title").addClass("open");
138
-
139
- 　$(".fee_inner01 .fee_article .accordion_in").css("display","block");
140
-
141
- var speed = 500;
142
-
143
- var href= $(this).attr("href");
144
-
145
- var target = $(href == "#" || href == "" ? 'html' : href);
146
-
147
- var position = target.offset().top;
148
-
149
- $("html, body").animate({scrollTop:position}, speed, "swing");
150
-
151
- return false;
152
-
153
- });
154
-
155
- });
156
-
157
167
  ```