Question

HTML / jQuery和Stack本身很新，所以请耐心等待。

我的问题是，当我运行我的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>

Answer 1

我编辑了你的问题$（文件）.ready（function（）{}）; 缺少添加它现在你的代码工作我看不到任何问题

$(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>

外部jQuery文件似乎没有执行

1 个答案: