0
HTML/jQuery和Stack本身很新颖，所以请耐心等待。外部jQuery文件似乎没有执行
我的问题是，当我运行我的index.html文件，似乎并没有执行我告诉它在我的外部.js文件中执行的操作。我正试图将一个简单的手风琴组装到网页中。
手风琴本身出现在网页上，但它的交互功能（即其扩展）似乎不起作用。
我有一个小窍门，怀疑这是一个非常简单的问题来解决。但是，我在这里。
HTML文件：index.html的
CSS文件：style.css中
JS文件：accordian.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