0
HTML/jQueryとStack自体に非常に新しいので、私に同行してください。外部のjQueryファイルが実行されていないようです
私の問題は、index.htmlファイルを実行すると、外部の.jsファイルで実行するようには実行されていないようです。私は単純なアコーディオンをウェブページに取り込もうとしています。
アコーディオン自体はウェブページに表示されますが、インタラクティブ機能（拡張機能）は動作していないようです。
私はこれが解決するのは非常に簡単な問題であるという疑問を抱いています。しかし、私はここにいる。
HTMLファイル：style.cssに
JSファイル：
$(document).ready(function() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
});* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
background-color: #ffffff;
overflow: scroll;
overflow-x: hidden;
font-family: 'Arial', serif;
}
.menu {
width: 100% height: 65%;
float: right;
background-color: #ffffff;
}
.menu>menu-content {
width: 200px;
height: 65px;
float: right;
font-family: 'Arial', serif;
font-size: 20px;
font-weight: bold;
letter-spacing: -0.05em;
position: relative;
color: #ffffff;
}
.menu>menu-content>a {
color: #ffffff;
text-decoration: none;
}
.NavBar {
background-color: #000000;
list-style: none;
text-align: center;
vertical-align: middle;
line-height: 100px;
width: 100%;
}
.NavBar>li {
display: inline-block;
padding-right: 50px;
font-size: 15px;
}
.NavBar>li>a {
text-decoration: none;
color: #ffffff;
}
.NavBar>li>a:hover {
color: #c5c5c5;
}
.banner>.banner-pic {
width: 100%;
display: block;
}
.about-section {
font-size: 18px;
text-align: center;
color: #000000;
padding: 40px 70px 40px 70px;
}
.about-section>p {
font-size: 15px;
text-align: center;
margin-top: 20px;
}
.toptips-section {
font-size: 18px;
text-align: center;
color: #000000;
padding: 40px 70px 40px 70px;
}
.toptips-section>p {
font-size: 15px;
text-align: center;
margin-top: 20px;
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active,
button.accordion:hover {
background-color: #ccc;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.events-section {
font-size: 12px;
text-align: left;
color: #000000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>RUNNERS WORLD</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
<script type="text/javascript" src="accordion.js"></script>
</head>
<body>
<nav>
<ul class="NavBar">
<li><a href="#Home">Home</a> </li>
<li><a href="#About">About</a> </li>
<li><a href="#TopTips">Top Tips</a> </li>
<li><a href="#Events">Events</a> </li>
<li><a href="#Contact">Contact</a> </li>
</ul>
</nav>
<div class="banner">
<img class="banner-pic" src="Images/banner4.jpeg"> </img>
</div>
<div class="about-section">
<h1>About Us</h1>
<p> Welcome to the runners world page. It is here that you will find all essential information to get you started in running. You will find information on Events, Top Tips, along with several photos displaying the best techniques. I hope that you enjoy
the website, and it acts as some inspiration to get you into running!</p>
</div>
<div class="slideshow">
</div>
<div class="toptips-section">
<h1> Top Tips </h1>
<p> These are my Top 5 Tips for getting into running, and getting on the road to a healthier lifestyle...</p>
</div>
<button class="accordion">Tip 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Tip 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Tip 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<body>
</html>
はたぶんただのコピー+ペーストエラーですが、あなたが閉鎖を逃している見ることができない取り組んでいる追加欠落していました'$（document）.ready（）'関数 – Lixus