个人中心
gpt4 book ai didi

javascript - 外部 jQuery 文件似乎没有执行

转载 作者：行者123 更新时间：2023-11-28 02:47:36 26 4
gpt4 key购买 nike

对 HTML/jQuery 和 Stack 本身非常陌生，所以请多多包涵。

我的问题是，当我运行 index.html 文件时，它似乎没有执行我在外部 .js 文件中告诉它执行的操作。我正在尝试将一个简单的 Accordion 合并到网页中。

Accordion 本身出现在网页中，但它的交互功能(即它的扩展)似乎不起作用。

我怀疑这是一个很容易解决的问题。然而，我在这里。

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

关于javascript - 外部 jQuery 文件似乎没有执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46835304/

26 4 0
文章推荐： php - 根据数据库字段内容自动(不是悬停)css 覆盖
文章推荐： c++ - "Most Important Const"再次
文章推荐： C++ 什么时候值得前向声明？
文章推荐： javascript - 客户端页面调用/抓取？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com