jQueryが機能しない

index.htmlでは機能するclickファンクションが違うページで機能してくれません。
htmlのリンクの綴りが間違っていることもなかったので、なぜ機能しないのかわかりません。
どなたかアドバイスお願いします。

html
1<header>
2            <section class="small-navi">
3            <div id="nav-toggle">
4                <div>
5                    <span></span>
6                    <span></span>
7                    <span></span>
8                </div>
9            </div>
10            </section>
11            <nav class="global_navi_l">
12                <ul>
13                    <li><i class="fas fa-sun"></i></li>
14                    <li><a href="index.html">Home</a></li>
15                    <li><a href="index.html/#profile">Profile</a></li>
16                    <li><a href="#skill">Skills</a></li>
17                    <li><a href="#works">Works</a></li>
18                    <li><a href="contact.html">Contact</a></li>
19                    <li><a href="https://twitter.com/foYEkjt7IelEbwd"><i class="fab fa-twitter"></i></a></li>
20                </ul>
21            </nav>
22            <nav class="global_navi_s">
23                <ul>
24                    <li><a href="#">Home</a></li>
25                    <li><a href="#profile">Profile</a></li>
26                    <li><a href="#skill">Skills</a></li>
27                    <li><a href="#works">Works</a></li>
28                    <li><a href="contact.html">Contact</a></li>
29                    <li><a href="https://twitter.com/foYEkjt7IelEbwd"><i class="fab fa-twitter"></i></a></li>
30                </ul>
31            </nav>
32        </header>
33
34//bodyの一番下
35　　　　　<!-- jQuery -->
36        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
37        
38        <!-- 自サイトのJavaScript -->
39        <script src="main.js"></script>
40
41

CSS
1@charset "UTF-8";
2
3
4
5.global_navi_l ul{
6    background-color: rgba(255,255,255,0.5);
7    
8    display: flex;
9    justify-content: center;
10    align-items: center;
11    
12    list-style: none;
13    position: fixed;
14    z-index: 3;
15    height: 50px;
16    width: 100%
17}
18.global_navi_l ul li {
19    
20    display: inline-block;
21    text-align: left;
22}
23.global_navi_l ul li a{
24    color: #444444;
25    display: block;
26    font-size: 20px;
27    margin: 0px 20px;
28    padding: 0px;
29    text-decoration: none;
30}
31
32.global_navi_l ul li a:hover{
33    color: #FF9933;
34    text-decoration: none;
35}
36.global_navi_l ul li a:after{
37	content: '';
38	width: 0;
39	transition: all 0.3s ease;
40	border-bottom: 3px solid #FF9933;
41	display: block;
42}
43
44.global_navi_l ul li a:hover:after {
45    width: 100%;
46	border-bottom: 3px solid #FF9933;
47}
48
49.global_navi_l ul li a:after {
50    left: 0;
51}
52
53.global_navi_l ul li:nth-child(1){
54    justify-self: flex-start;
55}
56
57.global_navi_s{
58    opacity: 0;
59}
60
61
62
63
64
65
66
67@media(max-width: 767px){
68    .global_navi_l{
69        opacity: 0;
70    }
71    
72    .small-navi{
73        background-color: rgba(255,255,255,0.5);
74        display: grid;
75        height: 50px;
76        position: fixed;
77        width: 100%;
78        z-index: 5;
79    }
80
81    #nav-toggle {
82        background-color: rgba(100,100,100,0.3);
83        border-radius: 3px;
84        height: 30px;
85        padding: 3px;
86        
87        position: absolute;
88        top: 9px;
89        right: 20px;
90        z-index: 10;
91    }
92    #nav-toggle > div {
93        position: relative;
94        width: 32px;
95    }
96    #nav-toggle span {
97        width: 100%;
98        height: 1px;
99        left: 0;
100        display: block;
101        background: #333;
102        position: absolute;
103        transition: top .5s ease, -webkit-transform .6s ease-in-out;
104        transition: transform .6s ease-in-out, top .5s ease;
105        transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
106    }    
107    #nav-toggle > div >span:nth-child(1) {
108        top: 0;
109    }
110    #nav-toggle > div >span:nth-child(2) {
111        top: 12px;
112    }
113    #nav-toggle > div >span:nth-child(3) {
114        top: 24px;
115    }
116
117
118    #nav-toggle:hover span:nth-child(1) {
119        top: 4px;
120    }
121    #nav-toggle:hover span:nth-child(3) {
122        top: 20px;
123    }
124
125
126    .open .small-navi{
127        background-color: rgba(255,255,255,0);
128    }
129    .open #nav-toggle{
130        background-color: rgba(255,255,255,0);
131    }
132    .open #nav-toggle span {
133        background: orange;
134    }
135    .open #nav-toggle span:nth-child(1) {
136        top: 15px;
137        -webkit-transform: rotate(45deg);
138            transform: rotate(45deg);
139    }
140    .open #nav-toggle span:nth-child(2) {
141        top: 15px;
142        width: 0;
143        left: 50%;
144    }
145    .open #nav-toggle span:nth-child(3) {
146        top: 15px;
147        -webkit-transform: rotate(-45deg);
148            transform: rotate(-45deg);
149    }
150
151
152    .global_navi_s {
153        background: #fff;
154        color: #444;
155        position: fixed;
156        top: 0;
157        left: 0;
158        right: 0;
159        bottom: 0;
160        z-index: 3;
161        text-align: center;
162        display: flex;
163        visibility: hidden;
164        flex-direction: column;
165        justify-content: center;
166        align-items: center;
167        font-size: 29px;
168        opacity: 0;
169        transition: opacity .6s ease, visibility .6s ease;
170    }
171    .global_navi_s a{
172        display: block;
173        color: #444;
174        text-decoration: none;
175        padding: 10px 0;
176        transition: color .6s ease;
177    }
178    .global_navi_s a:hover {
179        color: #CCC;
180    }
181    .global_navi_s ul {
182        list-style: none;
183    }
184    .global_navi_s ul li {
185        opacity: 0;
186        -webkit-transform: translateX(200px);
187            transform: translateX(200px);
188        transition: opacity .2s ease, -webkit-transform .6s ease;
189        transition: transform .6s ease, opacity .2s ease;
190        transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
191    }
192    .global_navi_s ul li:nth-child(2) {
193        transition-delay: .15s;
194    }
195    .global_navi_s ul li:nth-child(3) {
196        transition-delay: .3s;
197    }
198    .global_navi_s ul li:nth-child(4) {
199        transition-delay: .45s;
200    }
201    .global_navi_s ul li:nth-child(5) {
202        transition-delay: .6s;
203    }
204    .global_navi_s ul li:nth-child(6) {
205        transition-delay: .75s;
206    }
207    .global_navi_s ul li:nth-child(7) {
208        transition-delay: .9s;
209    }
210
211    .open {
212        overflow: hidden;
213    }
214    .open .global_navi_s {
215        visibility: visible;
216        opacity: 1;
217    }
218    .open .global_navi_s li {
219        opacity: 1;
220        -webkit-transform: translateX(0);
221            transform: translateX(0);
222        transition: opacity .9s ease, -webkit-transform 1s ease;
223        transition: transform 1s ease, opacity .9s ease;
224        transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
225    }
226
227}

CSS
1@charset "UTF-8";
2
3body{
4    background-color: #fff;
5    background-image: none;
6    
7    display: grid;
8    grid-template-columns: 1fr;
9    grid-template-rows:
10                [head] 150px
11                [container] auto
12                [foot] 50px;
13}
14body > *{
15    grid-column: 2 / -2;
16}
17
18header{
19    grid-row: head;
20}
21.contact-container{
22    background-color: #fff;
23    grid-row: container;
24    
25    display: grid;
26    grid-template-columns: 200px 1fr 200px;
27    grid-template-rows:
28                [sec-t] 200px
29                [body] auto;
30}
31.contact-text{
32    grid-row: sec-t;
33}
34.contact{
35    grid-row: body;
36}
37
38.form-group{
39    margin-bottom: 50px;
40}
41.form-btn{
42    padding: 0px;
43}
44
45
46
47
48
49@media(max-width: 767px){
50    .contact-container{
51        background-color: #fff;
52        grid-row: container;
53    
54        display: grid;
55        grid-template-columns: 20px 1fr 20px;
56        grid-template-rows:
57                    [sec-t] auto
58                    [body] auto;
59        grid-row-gap: 20px;
60    }
61    h2{
62        font-size: 40px;
63    }
64    p{
65        font-size: 13px;
66    }
67}

JavaScript
1$(document).ready(function() {
2  $("#nav-toggle").click(function() {
3    $("body").toggleClass("open");
4    console.log("OK");
5  });
6});

上がナビゲーション専用のCSS、下が機能させたいページのCSSです。よろしくお願いします。

AMK

2019/10/21 18:03

Jqueryは？

退会済みユーザー

2019/10/21 23:47

jQueryの読み込み・使用しているコードを書いてください。

x_x

2019/10/23 04:31

「clickファンクション」というのは何を指していますか？スクリプトであればそれを提示ください。

zynu

2019/10/23 09:55

$(document).ready(function() { $("#nav-toggle").click(function() { $("body").toggleClass("open"); console.log("OK"); JavaScriptはこんな感じです }); });

zynu

2019/10/23 10:14

jQueryの読み込みも追記しました。ただhtmlはスペルミスが起きないようにindex.html(ここでは機能している)からコピペしているのでここに間違いはないと思います。

行動規範の内容に同意します

回答2件

自己解決

JavaScriptの違う部分でエラーを起こしていたみたいで、必要な部分だけ切り取ってべつのファイルに移したところ上手くいきました。
答えられないような質問をしてしまい、申し訳ないです。

投稿2019/10/23 11:46

zynu

総合スコア29

外部ファイルへのパスが通っていない場合にチェックする項目

jQuery.js等の外部ファイル（ライブラリ）は、URIの記述次第で、参照できないことがあります。

PathTree
1/htdocs
2 ├─/css
3 │　├─base.css
4 │　└─bootstrap.css
5 ├─/js
6 │　├─jquery.js
7 │　└─fugafuga.js
8 ├─/pages
9 │　├─/category_01
10 │　│　└─gyorui_zukan_01.html <- ☆
11 │　├─index.html <- ★
12 │　└─hogehoge.html<- ★
13 └─/img
14　　├─home.png
15　　└─hogefuga.jpeg

（便宜上、<code>ブロックで記述致します。）

この様なパスでコンテンツを保存されていると、
pagesディレクトリの階層が深くなると、相対パスでjQueryのURIを指定等していると
上手く参照できなくなります。

参考例
・以下の様な場合、jquery.jsを読み込めません。
URL:https://www.hogefuga.com/content/pages/category_01/gyorui_zukan_01.html（☆箇所）
JavaScriptタグ：<script type="text/javascript" src="../js/jquery.js"></script>
（上記の記述、★箇所のページなら参照できます。）

チェック項目
・F12等で、管理者ツールを使い、ネットワークのログを確認
->jquery.jsの取得箇所でエラーになっていないか？を見る

対処
・JavaScriptタグを相対パスから、絶対パス[src="/js/jquery.js"]に変える
・CDNを利用する

ファイルが参照できてない場合、こちらが考えられます。

JSの読み込みが出来ているが、イベントの発布が上手く動かない

単純です。。。記述されたjQeryの処理（javascript）を
jQueryの呼び出しタグよりも後に記述してください。

...

今時点で推察できるのは、このあたりです。
解決を真剣に目指しているのでしたら、質問内容に情報を追記等行い、
原因の究明を行うのが最有力化と..

投稿2019/10/22 12:13

tama_yn0815

総合スコア143

zynu

2019/10/23 09:56

すみません、CDNで読み込んでいるのでこれではないと思います。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

jQueryが機能しない

外部ファイルへのパスが通っていない場合にチェックする項目

JSの読み込みが出来ているが、イベントの発布が上手く動かない

...

関連した質問