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

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

转载作者：行者123 更新时间：2023-11-28 02:47:36

对 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/

文章推荐： php - 根据数据库字段内容自动(不是悬停)css 覆盖

文章推荐： c++ - "Most Important Const"再次

文章推荐： C++ 什么时候值得前向声明？

文章推荐： javascript - 客户端页面调用/抓取？

带有通配符的 webpack 外部
如何指示 webpack 排除所有 d3 模块？ // does not work externals: { "d3-*": "d3" } 所以如果应用导入了d3-submod
Scala 外部 => 语法
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: What does “outer =>” really mean? 我在哪里可以找到有关信息 trait After
javascript - 外部 for 循环时的非线性性能
这是一个简单的循环，我正在尝试对性能进行基准测试。 var extremeLoop=function(n){ var time=new Date() var t=0; for(
jquery - 外部+内联样式与仅外部样式
问题+概述下面是两个片段，其中包含最初隐藏的 div，然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样
javascript - 外部.js文件获取不到页面元素？
我有一个 HTML 页面和一个单独的 .js 文件，该文件包含在带有的页面中标签。这是我的 .js 文件: element = document.getElementById("test");
类的第二个实现文件中静态字段的 C++ 外部？
我在 linux 静态库项目中有 3 个文件，我想在两个类方法实现文件中使用的静态字段存在链接问题。我有 class1.h、class1main.cpp 和 class1utils.cpp。 clas
javascript - 外部单击以重置颜色？
我正在尝试将颜色背景更改为默认背景颜色，当我点击输入框外我尝试使用“null”或“none”但没有用？ window.addEventListener('click', outsideClick);
Android 文件选择器将音频文件重定向到/外部
我正在编写一个应用程序，要求用户在手机上选择各种类型的文件。我使用此代码启动文件选择器 Intent : Intent intent = new Intent(Intent.ACTION_GET_C
android - 外部-内部存储
在 android 中，不可移动(内部)的外部存储和内部存储有什么区别？我不确定在哪里保存我的数据。我只需要保存一个人可以随时提取的游戏统计数据谢谢最佳答案在许多较新的设备中，将不再有物理区别，
c++ - 外部、链接和全局变量
在 C++ 中，假设我们有这个头文件: myglobals.h #ifndef my_globals_h #define my_globals_h int monthsInYear = 12; #en
C++ 外部/多重定义
我正在尝试使用 externs 在 C++ 中连接到 Ada。这两种实现有什么区别？实现A namespace Ada { extern "C" { int getN
jQuery: 外部 html()
这个问题在这里已经有了答案: Get selected element's outer HTML (30 个答案) 关闭 2 年前。想象一下我们有这样的东西: Hello World 如果我们这样
vb6 - 外部 DLL 应该放在哪里？
假设我在模块的顶部有这个: Public Declare Function getCustomerDetails Lib "CustomerFunctions" () As Long 如果我从 VB6
javascript - 外部 Javascript 文件获取？
我目前正在使用这段代码: var wordRandomizer = { run: function (targetElem) { var markup = this.creat
svn - 如何部署 Subversion 外部？
我们正在使用 SVN 试水，并以 Beanstalk 作为主机。我们的设置如下所示: 存储库:模块模块一模块二模块 3 存储库:网站1 自定义网站代码 svn:对模块 1 的外部引用 svn:对
Kubernetes 外部 ip 负载均衡器裸机
有没有办法在负载均衡器中设置自动外部 IP 分配给像谷歌这样的服务？我在裸机上运行 Kubernetes。谢谢最佳答案使用 nodePort 类型的服务，它会将您的服务绑定(bind)到所有节
symfony - generateUrl 外部 Controller
是否有可能在 Controller 之外使用 generateUrl() 方法？我尝试在带有 $this->get('router') 的自定义存储库类中使用它，但它没有用。更新我在这里找到了一
Angular 作为 Webpack 外部
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小库实现了这一目标。如果我只是移动 '@angular/compil
gradle - 创建一个依赖于另一个(外部)插件的Gradle插件
我想创建一个自动应用其他插件的插件(外部插件)。这要求在我称为“应用插件”之前为插件设置构建脚本依赖项。但是似乎我无法在插件中添加buildscript依赖项，或者得到了: 您不能更改处于未解析状态的
r - 创建自定义几何图形来计算汇总统计数据并在绘图区域*外部*显示它们
我是R包的创建者EnvStats . 有一个我经常使用的函数，叫做 stripChart .我刚开始学习ggplot2 ，并在过去几天里仔细研究了 Hadley 的书、Winston 的书、Stack

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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