実現したいこと
jqueryが正常に動くようにしたい。
今作っているハンバーガーメニューの制作の続きをして検証をしながら完成させたい。
最初の段階で、「is-hidden」で、jqueryを使って隠れていた画像や文章が見えている状態を直したい。
jqueryのコードが多くなってから突然全部のjqueryが動かなくなりました。
発生している問題・エラーメッセージ(検証のconsoleで出ているエラー)
GET http://127.0.0.1:5500/10/10/main.js net::ERR_ABORTED 404 (Not Found)
Refused to execute script from 'http://127.0.0.1:5500/10/10/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
試したこと
ググってjqueryが動かなくなる原因を調べて実行しました。
jqueryの記述と場所を変えて、正常に動くかやってみました。
ご回答よろしくお願いします。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <link rel="stylesheet" href="reset.css" /> 8 <link rel="stylesheet" href="stylesheet.css" /> 9 <link rel="stylesheet" href="responsive.css" /> 10 11 <title>Document</title> 12 </head> 13 <body> 14 <header class="header" id="header"> 15 <div class="header-div"> 16 <a class="header-a" href="index.html"> 17 <img class="header-img" src="img\logo.svg" alt="" /> 18 </a> 19 </div> 20 <nav id="nav"> 21 <ul class="nav-ul"> 22 <li class="nav-li"><a href=""> PRODUCTS</a></li> 23 <li class="nav-li"><a href=""> ABOUT</a></li> 24 <li class="nav-li"><a href=""> COMPANY</a></li> 25 <li class="nav-li"><a href=""> CONTACT</a></li> 26 </ul> 27 </nav> 28 <div class="toggle_btn"> 29 <span></span> 30 <span></span> 31 <span></span> 32 </div> 33 </header> 34 <main class="a"> 35 36 <div class="a-container"> 37 <h2>products</h2> 38 <ul class="a-ul"> 39 <li class="a-li"> 40 <a class="a-a" href=""> 41 <img class="a-img" src="img\item1.jpg" alt="" /> 42 <p> 43 プロダクトタイトルプロダクトタイトル <br /> 44 ¥99,999 +tax 45 </p> 46 </a> 47 </li> 48 <li class="a-li"> 49 <a class="a-a" href=""> 50 <img class="a-img" src="img\item2.jpg" alt="" /> 51 <p> 52 プロダクトタイトルプロダクトタイトル <br /> 53 ¥99,999 +tax 54 </p> 55 </a> 56 </li> 57 <li class="a-li"> 58 <a class="a-a" href=""> 59 <img class="a-img" src="img\item3.jpg" alt="" /> 60 <p> 61 プロダクトタイトルプロダクトタイトル <br /> 62 ¥99,999 +tax 63 </p> 64 </a> 65 </li> 66 <li class="a-li"> 67 <a class="a-a" href=""> 68 <img class="a-img" src="img\item4.jpg" alt="" /> 69 <p> 70 プロダクトタイトルプロダクトタイトル <br /> 71 ¥99,999 +tax 72 </p> 73 </a> 74 </li> 75 <li class="a-li"> 76 <a class="a-a" href=""> 77 <img class="a-img" src="img\item5.jpg" alt="" /> 78 <p> 79 プロダクトタイトルプロダクトタイトル <br /> 80 ¥99,999 +tax 81 </p> 82 </a> 83 </li> 84 <li class="a-li"> 85 <a class="a-a" href=""> 86 <img class="a-img" src="img\item6.jpg" alt="" /> 87 <p> 88 プロダクトタイトルプロダクトタイトル <br /> 89 ¥99,999 +tax 90 </p> 91 </a> 92 </li> 93 <li class="a-li"> 94 <a class="a-a" href=""> 95 <img class="a-img" src="img\item7.jpg" alt="" /> 96 <p> 97 プロダクトタイトルプロダクトタイトル <br /> 98 ¥99,999 +tax 99 </p> 100 </a> 101 </li> 102 <li class="a-li"> 103 <a class="a-a" href=""> 104 <img class="a-img" src="img\item8.jpg" alt="" /> 105 <p> 106 プロダクトタイトルプロダクトタイトル <br /> 107 ¥99,999 +tax 108 </p> 109 </a> 110 </li> 111 <li class="a-li is-hidden"> 112 <a class="a-a" href=""> 113 <img class="a-img" src="img\item9.jpg" alt="" /> 114 <p> 115 プロダクトタイトルプロダクトタイトル <br /> 116 ¥99,999 +tax 117 </p> 118 </a> 119 </li> 120 <li class="a-li is-hidden"> 121 <a class="a-a" href=""> 122 <img class="a-img" src="img\item10.jpg" alt="" /> 123 <p> 124 プロダクトタイトルプロダクトタイトル <br /> 125 ¥99,999 +tax 126 </p> 127 </a> 128 </li> 129 <li class="a-li is-hidden"> 130 <a class="a-a" href=""> 131 <img class="a-img" src="img\item11.jpg" alt="" /> 132 <p> 133 プロダクトタイトルプロダクトタイトル <br /> 134 ¥99,999 +tax 135 </p> 136 </a> 137 </li> 138 <li class="a-li is-hidden"> 139 <a class="a-a" href=""> 140 <img class="a-img" src="img\item12.jpg" alt="" /> 141 <p> 142 プロダクトタイトルプロダクトタイトル <br /> 143 ¥99,999 +tax 144 </p> 145 </a> 146 </li> 147 </ul> 148 <p class="more-btn">View More</p> 149 <div class="more-12"><a href="">1</a><a href="">2</a></div> 150 </div> 151 </main> 152 <footer> 153 <div class="footer-div"> 154 <ul class="footer-ul"> 155 <li class="footer-li"><a href="https://www.instagram.com/">instagram</a></li> 156 <li class="footer-li"><a href="https://twitter.com/?lang=ja">twitter</a></li> 157 <li class="footer-li"><a href="https://www.facebook.com/facebook/?locale=ja_JP">facebook</a></li> 158 </ul> 159 160 </div> 161 <div class="c">© Furniture Design</div> 162 </footer> 163 <script 164 src="https://code.jquery.com/jquery-3.6.3.min.js" 165 integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" 166 crossorigin="anonymous" 167 ></script> 168 <script src="main.js"></script> 169 </body> 170</html> 171
scss
1header { 2 max-width: 1360px; 3 height: 80px; 4 width: 100%; 5 6 margin: 0 auto; 7 display: flex; 8 position: fixed; 9 left: 0; 10 right: 0; 11 justify-content: space-between; 12 align-items: center; 13 14 15 16 17} 18nav { 19 display: none; 20} 21 22.toggle_btn { 23 width: 50px; 24 height: 50px; 25 background-color: gainsboro; 26 position: relative; 27 display: block; 28 top: 0; 29 left: 0; 30 cursor: pointer; 31 text-align: center; 32} 33 34.toggle_btn span { 35 position: absolute; 36 display: inline-block; 37 border: 1px solid black; 38 width: 50%; 39 height: 2px; 40 top: 50%; 41 left: 50%; 42 text-align: center; 43 44} 45 46.toggle_btn span:nth-child(1){ 47 transform: translate(-50%,10px); 48} 49.toggle_btn span:nth-child(2){ 50 transform: translate(-50%,-50%); 51} 52.toggle_btn span:nth-child(3){ 53 transform: translate(-50%,-10px); 54} 55 56.toggle_btn .open span:nth-child(1){ 57 transform: rotate(45deg); 58} 59.toggle_btn .open span:nth-child(2){ 60 opacity: 0; 61} 62.toggle_btn .open span:nth-child(3){ 63 transform: rotate(-45deg); 64} 65 66.a { 67 padding: 150px 20px; 68 69} 70 71.a h2 { 72 max-width: 1360px; 73 text-align: left; 74 margin-left: 100px; 75 76} 77 78.a-ul { 79 max-width: 1360px; 80 margin: 0 auto; 81 display: flex; 82 justify-content: space-between; 83 flex-wrap: wrap; 84 align-items: center; 85 list-style: none; 86 .a-li { 87 width: 23%; 88 } 89 .a-img { 90 width: 100%; 91 } 92 .a-a { 93 text-decoration: none; 94 } 95} 96.more-btn { 97 text-align: center; 98 margin-top: 30px; 99} 100 101.more-12 { 102 text-align: center; 103} 104 105.more-12 a { 106 padding: 30px; 107} 108 109footer { 110 display: flex; 111 justify-content: space-between; 112 align-items: center; 113} 114 115.footer-ul { 116 display: flex; 117 justify-content: space-between; 118} 119 120.footer-li { 121 padding: 30px; 122 list-style: none; 123} 124 125.c { 126 padding-right: 20px; 127}
jquery
1$(function(){ 2 3 4/*ハンバーガーメニュー*/ 5 $('toggle_btn').click(function(){ 6 $(this).toggleClass('open'); 7 $('span').toggleClass('open'); 8 }); 9 10/* ここには、表示するリストの数を指定します。 */ 11var moreNum = 8; 12 13/* 表示するリストの数以降のリストを隠しておきます。 */ 14$('.a-li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden'); 15 16/* 全てのリストを表示したら「もっとみる」ボタンをフェードアウトします。 */ 17$('.more-btn').on('click', function() { 18 $('.a-li.is-hidden').slice(0, moreNum).removeClass('is-hidden'); 19 if ($('.a-li.is-hidden').length == 0) { 20 $('.more-btn').fadeOut(); 21 } 22}); 23 24/* リストの数が、表示するリストの数以下だった場合、「もっとみる」ボタンを非表示にします。 */ 25$(function() { 26 var list = $(".a-ul li").length; 27 if (list < moreNum) { 28 $('.more-btn').addClass('is-btn-hidden'); 29 } 30}); 31 32$('.more-btn').click(function(){ 33 $('.more-12').show(); 34}); 35 36}); 37 38$('.more-btn').click(function(){ 39 $('.a-container h2').show(); 40 41}); 42 43 44

回答2件
あなたの回答
tips
プレビュー