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

編集履歴

質問編集履歴

4

文言修正

2020/07/17 14:41

投稿

okama
okama

スコア22

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  ページ内のアンカーリンク(href="#article")をクリックすると
2
- スムーススクロールで[id="article"]に移動し、アコーディオンが開くという動きを実装したいです。
2
+ [id="article"]に移動し、アコーディオンが開くという動きを実装したいです。
3
+ (アコーディオンが先でもアンカーが先でも大丈夫です！)
3
4
 
4
5
  アコーディオン部分はアンカーでも開くし、アコーディオン自体のクリックでも開くようにしたいです。
5
6
  開閉をわかりやすくしたのでアコーディオン右には画像で+/-もつけています。

3

jsを変更しました

2020/07/17 14:41

投稿

okama
okama

スコア22

title CHANGED
File without changes
body CHANGED
@@ -68,23 +68,29 @@
68
68
  top: 16px;
69
69
  }
70
70
  ```
71
+
72
+
71
73
  ### js
72
74
  ```ここに言語を入力
75
+ $(function () {
76
+ $(".fee_article_title").click(function () {
77
+ $(this).toggleClass("open").next().slideToggle("normal");
78
+ });
79
+ });
73
80
 
74
-
75
81
  $(function () {
82
+ $('.fee_article_in').css("display", "none");
76
- 　　$('.fee_inner01 a[href^="#"]').click(function () {
83
+ $('.fee_inner01 a[href^="#"]').click(function () {
77
- 　　　　$(".fee_article_title").addClass("open");
84
+ $(".fee_article_title").addClass("open");
78
- 　　　　$(".fee_article_in").css("display","block");
85
+ $(".fee_article_in").css("display", "block");
79
- 　　　　var speed = 500;
86
+ var speed02 = 500;
80
- 　　　　var href= $(this).attr("href");
87
+ var href02 = $(this).attr("href");
81
- 　　　　var target = $(href == "#" || href == "" ? 'html' : href);
88
+ var target02 = $(href02 == "#" || href02 == "" ? 'html' : href02);
82
- 　　　　var position = target.offset().top;
89
+ var position02 = target02.offset().top;
83
- 　　　　$("html, body").animate({scrollTop:position}, speed, "swing");
90
+ $("html, body").animate({
91
+ scrollTop: position02
92
+ }, speed02, "swing");
84
- 　　　　return false;
93
+ return false;
85
- 　　});
94
+ });
86
- 　　$(".fee_article_title").click(function () {
87
- 　　　　$(this).toggleClass("open").next().slideToggle("normal");
88
- 　　});
89
95
  });
90
96
  ```

2

jsを修正しました

2020/07/17 14:40

投稿

okama
okama

スコア22

title CHANGED
File without changes
body CHANGED
@@ -71,14 +71,20 @@
71
71
  ### js
72
72
  ```ここに言語を入力
73
73
 
74
+
74
- $(function(){
75
+ $(function () {
75
- $('.fee_article_in').hide();
76
- $('.fee_inner01 a[href^="#"]').on('click', function() {
76
+ 　　$('.fee_inner01 a[href^="#"]').click(function () {
77
- $('.fee_article_title').addClass('open');
77
+ 　　　　$(".fee_article_title").addClass("open");
78
- $(this).attr('href').next('.fee_article_in').show();
78
+ 　　　　$(".fee_article_in").css("display","block");
79
+ 　　　　var speed = 500;
80
+ 　　　　var href= $(this).attr("href");
81
+ 　　　　var target = $(href == "#" || href == "" ? 'html' : href);
82
+ 　　　　var position = target.offset().top;
83
+ 　　　　$("html, body").animate({scrollTop:position}, speed, "swing");
84
+ 　　　　return false;
79
- });
85
+ 　　});
80
- $(".fee_article_title").click(function () {
86
+ 　　$(".fee_article_title").click(function () {
81
- $(this).toggleClass("open").next().slideToggle("normal");
87
+ 　　　　$(this).toggleClass("open").next().slideToggle("normal");
82
- });
88
+ 　　});
83
89
  });
84
90
  ```

1

補足

2020/07/17 11:10

投稿

okama
okama

スコア22

title CHANGED
File without changes
body CHANGED
@@ -1,33 +1,25 @@
1
1
  ページ内のアンカーリンク(href="#article")をクリックすると
2
- スムーススクロールで[id="article"]に移動し、
2
+ スムーススクロールで[id="article"]に移動し、アコーディオンが開くという動きを実装したいです。
3
- アコーディオンが開く
4
3
 
4
+ アコーディオン部分はアンカーでも開くし、アコーディオン自体のクリックでも開くようにしたいです。
5
- という動きを実装したいです。
5
+ 開閉をわかりやすくしたのでアコーディオン右には画像で+/-もつけています。
6
6
 
7
- 下記の記述でローカル上、動作確認ができたのですが、
8
- 本番環境にUPされたアンカーリンクをクリックすると
7
+ ページ内に他にもアンカーリンクを利用するため
8
+ ユニークな記述をお願いします。
9
9
 
10
+ 下記の記述でアコーディオンだけの開閉は問題ありませんが
10
- <li>＊1<a href="#article" id="article-anc_01">見出し01</a></li>
11
+ アンカーを押してもアコーディオンが開きませんでした。
11
- →
12
- <li>＊1<a href="https://●●●/index.html?ancr=●●●●#article" id="#article-anc_01">見出し01</a></li>
13
12
 
14
- のようにhrefの記述がおかしくなり、
13
+ どこの記述が問題ありますでしょうか。。
15
- ページが再読み込みのようになり、アコーディオンも動作しません。
16
14
 
17
- ・下記の記述だとどこが問題あるでしょうか。
18
- ・この記述の他にもっといい書き方があれば教えていただきたいです。
19
- ・ローカル環境だけ動くのは何故かわかりますでしょうか？
20
-
21
15
  ### html
22
16
  ```ここに言語を入力
23
17
  <div class="fee_inner01">
24
18
  <div class="fee_article_top">
25
19
  <ul>
26
- <li>＊1<a href="#article" id="article-anc_01">見出し01</a></li>
20
+ <li>＊1<a href="#article" id="article-anc_01" class="fee_article_btn">見出し01</a></li>
27
- <li>＊2 <a href="#article" id="article-anc_02">見出し02</a></li>
21
+ <li>＊2 <a href="#article" id="article-anc_02" class="fee_article_btn">見出し02</a></li>
28
- <li>＊3 <a href="#article" id="article-anc_03">見出し03</a></li>
22
+ <li>＊3 <a href="#article" id="article-anc_03" class="fee_article_btn">見出し03</a></li>
29
- <li>＊4<a href="#article" id="article-anc_04">見出し04</a></li>
30
- <li>＊5<a href="#article" id="article-anc_05">見出し05</a></li>
31
23
  </ul>
32
24
  </div>
33
25
  <div class="fee_article fee_article mgb-20">
@@ -36,44 +28,57 @@
36
28
  <p>＊1　テキストが入ります</p>
37
29
  <p>＊2　テキストが入ります</p>
38
30
  <p>＊3　テキストが入ります</p>
39
- <p>＊4　テキストが入ります</p>
40
- <p>＊5　テキストが入ります</p>
41
31
  </div>
42
32
  </div>
43
33
  </div>
44
34
  ```
35
+ ### css
36
+ ```ここに言語を入力
37
+ .fee_article_top ul {
38
+ padding: 12px;
39
+ margin: 15px 0 20px;
40
+ position: relative;
41
+ }
42
+ .fee_article_in {
43
+ padding: 0 5% 20px;
44
+ }
45
+ .ac_btn {
46
+ position: relative;
47
+ }
48
+ .ac_btn::after {
49
+ content: "";
50
+ display: inline-block;
51
+ width: 18px;
52
+ height: 18px;
53
+ background: url(../images/ac_plus.png) no-repeat;
54
+ background-size: 18px;
55
+ position: absolute;
56
+ right: 20px;
57
+ top: 16px;
58
+ }
59
+ .ac_btn.open::after {
60
+ content: "";
61
+ display: inline-block;
62
+ width: 18px;
63
+ height: 18px;
64
+ background: url(../images/ac_minus.png) no-repeat;
65
+ background-size: 18px;
66
+ position: absolute;
67
+ right: 20px;
68
+ top: 16px;
69
+ }
70
+ ```
45
71
  ### js
46
72
  ```ここに言語を入力
47
- //アンカー共通
73
+
48
74
  $(function(){
75
+ $('.fee_article_in').hide();
49
- $('a[href^="#"]').click(function(){
76
+ $('.fee_inner01 a[href^="#"]').on('click', function() {
50
- var speed = 500;
51
- var href= $(this).attr("href");
77
+ $('.fee_article_title').addClass('open');
52
- var target = $(href == "#" || href == "" ? 'html' : href);
78
+ $(this).attr('href').next('.fee_article_in').show();
53
- var position = target.offset().top;
54
- $("html, body").animate({scrollTop:position}, speed, "swing");
55
- return false;
56
79
  });
80
+ $(".fee_article_title").click(function () {
81
+ $(this).toggleClass("open").next().slideToggle("normal");
82
+ });
57
83
  });
58
-
59
- //アコーディオン共通
60
- $(function(){
61
- $(".accordion_in").css("display","none");
62
- $(".article_title, .fee_article_title").click(function(){
63
- $(this).toggleClass("open").next().slideToggle("normal");
64
- });
65
- });
66
-
67
- $(function(){
68
- 　$('a[href^="#article"]').click(function(){
69
- 　$(".fee_inner01 .fee_article_title").addClass("open");
70
- 　$(".fee_inner01 .fee_article .accordion_in").css("display","block");
71
- var speed = 500;
72
- var href= $(this).attr("href");
73
- var target = $(href == "#" || href == "" ? 'html' : href);
74
- var position = target.offset().top;
75
- $("html, body").animate({scrollTop:position}, speed, "swing");
76
- return false;
77
- });
78
- });
79
84
  ```