teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

アコーディオン実装コードは問題ないとのことで、TOPページのhtmlを追加してみました。どこかと競合してるのかもしれません。。。

2017/07/01 05:47

投稿

hotmikan
hotmikan

スコア8

title CHANGED
File without changes
body CHANGED
@@ -2,7 +2,85 @@
2
2
  アコーディオンを実装しているのですが、開いた状態のまま表示されてしまいます。
3
3
  **最初から閉じた状態で表示させたいです。**
4
4
 
5
+ ・[適応させようとしているサイトはコチラです。](http://xn--rckyc9ep71m42vklfn05b.xyz/)
6
+ 下記の方法で問題なく動作したという方がいらっしゃったので、自分のテンプレートの部分と何か相性が悪いのかもしれません。
7
+ ###自分のトップページ(明らかに不要な部分は消してます。)
8
+ ```
9
+ <!DOCTYPE html>
10
+ <html lang="ja" class="col2">
11
+ <head>
5
12
 
13
+ <title>タイトル</title>
14
+ <meta charset="UTF-8">
15
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
17
+ <meta name="keywords" content="あ">
18
+ <meta name="description" content="あ">
19
+ <link rel="stylesheet" href="./css/base.css">
20
+ <link rel="stylesheet" href="./css/rwd.css">
21
+ <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
22
+ <link rel="apple-touch-icon" href="./images/apple-touch-icon.png">
23
+ <link rel="apple-touch-icon-precomposed" href="./images/apple-touch-icon.png">
24
+ <link rel="icon" href="./images/apple-touch-icon.png">
25
+
26
+ <!--[if lt IE 9]>
27
+ <script src="./js/html5.js"></script>
28
+ <![endif]-->
29
+ <script src="./js/jquery.js" charset="utf-8"></script>
30
+ <script src="./js/jquery-migrate.js" charset="utf-8"></script>
31
+ <!--▼私が入れたアコーディオンー-->
32
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
33
+ <script>
34
+ $(function(){
35
+ $("#acMenu dt").on("click", function() {
36
+ $(this).next().slideToggle();
37
+ });
38
+ });
39
+ </script>
40
+ <!--▲私が入れたアコーディオンー-->
41
+ </head>
42
+
43
+ <body class="home">
44
+ <サイトヘッダーとグローバルナビ>
45
+
46
+ <div class="main-body">
47
+ <div class="main-body-in">
48
+
49
+ <main>
50
+ <div class="main-conts">
51
+
52
+ <section class="section-wrap">
53
+ <div class="section-in">
54
+ <div id="text1">
55
+
56
+ <p>検証用です。</p>
57
+ <p>&nbsp;</p>
58
+ <p>下記部分、<br />『<span style="color:#FF0A0A">これを表示させたい</span>』<br />が消えていたら正解</p>
59
+ <p>&nbsp;</p>
60
+ <p>-----ここからアコーディオン部分です-----</p>
61
+ <dl id="acMenu">
62
+ <dt><span style="font-size:20px" class="lbg"><strong>これをクリックしたら</strong></span></dt>
63
+ <dd>
64
+ <p><span style="color:#FF0A0A">これを表示させたい(これ見えてたらあかんやつ★これを表示させたい(これ見えてたらあかんやつこれを表示させたい(これ見えてたらあかんやつこれを表示させたい(これ見えてたらあかんやつこれを表示させたい(これ見えてたらあかんやつこれを表示させたい(これ見えてたらあかんやつこれを表示させたい(これ見えてたらあかんやつこれを表示させたい(これ見えてたらあかんやつこれを表示させたい(これ見えてたらあかんやつこれを表示させたい(これ見えてたらあかんやつこれを表示させたい(これ見えてたらあかんやつ</span></p>
65
+ </dd>
66
+ </dl>
67
+ <p>-----ここまでアコーディオン部分です-----</p>
68
+ </div>
69
+
70
+ </div>
71
+
72
+ </div>
73
+ </main>
74
+ </aside>
75
+ <!--▲サブコンテンツ-->
76
+ </div><!--main-body-in-->
77
+ </div><!--main-body-->
78
+ <!--▼サイトフッター-->
79
+
80
+ <script src="./js/utility.js" charset="utf-8"></script>
81
+ <script src="./js/socialButton.js" charset="utf-8"></script>
82
+ ```
83
+
6
84
  過去に同じ質問をさせれいる方がいらっしゃり、
7
85
  その回答の display:none;を追加したのですが、うまくいきません。
8
86
  [リンク内容](https://teratail.com/questions/20498)