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