javascript - ClassList 在 IE9 中不起作用。需要替代功能-6ren

javascript - ClassList 在 IE9 中不起作用。需要替代功能

转载作者：行者123 更新时间：2023-11-30 15:55:42

25

4

我无法运行“W3Schools Accordion with symbols” ' 在 IE9 中。 ClassList 在 IE9 中不起作用。它给出以下错误

SCRIPT5007: Unable to get value of the property 'toggle': object is null or undefined

I am not a coder. I need alternative function, so that I dont need to recreate my 1000 lines static HTML page.

Here is full code that I need to run in IE9

<!DOCTYPE html>
<html>
<head>
<style>
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: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
</style>
</head>
<body>

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 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">Section 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">Section 3</button>
<div id="foo" 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>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

</body>
</html>

最佳答案

当您使用 jQuery 标记问题时，您可以使用 toggleClass()，如下所示:

$(".accordion").click(function(){
    $(this).toggleClass("active").next().toggleClass("show");
});

$(function() {
  $(".accordion").click(function() {
    $(this).toggleClass("active").next().toggleClass("show");
  });
});

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: #ddd;
}
button.accordion:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
button.accordion.active:after {
  content: "\2796";
}
div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
div.panel.show {
  opacity: 1;
  max-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 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">Section 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">Section 3</button>
<div id="foo" 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>

关于javascript - ClassList 在 IE9 中不起作用。需要替代功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38589719/

25

4

0

文章推荐： javascript - 版本控制包文件

文章推荐： javascript - 我对使用 javascript while 语句感到困惑

文章推荐： javascript - XMLHttpRequest 文件上传在 IE11 中不起作用

文章推荐： javascript - 如何全屏显示媒体播放器顶部的文本？

c - gstreamer 需要 g_main_loop_run 而 gtk 需要 gtk_main()
我正在尝试用 C 语言编写一个使用 gstreamer 的 GTK+ 应用程序。 GTK+ 需要 gtk_main() 来执行。 gstreamer 需要 g_main_loop_run() 来执行。
python - 为什么 opencv3 需要 libavcodec56 而 opencv2 需要 libavcodec57
我已经使用 apt-get 安装了 opencv。我得到了以下版本的opencv2，它工作正常: rover@rover_pi:/usr/lib/arm-linux-gnueabihf $ pytho
ios - UIScrollView - 需要 x 位置/宽度的约束，需要 y 位置/高度的约束
我有一个看起来像这样的 View 层次结构(基于其他答案和 Apple 的使用 UIScrollView 的高级 AutoLayout 指南): ScrollView 所需的2 个步骤是: 为 Scr
Linux glib 需要 pkg-config 而 pkg-config 需要 glib？
我尝试安装 udev。 udev 在 ./configure 期间给我一个错误 --exists: command not found configure: error: pkg-config and
sql - 为什么我选择 1 需要 40 毫秒，而选择 150 需要 500 秒？
我正在使用 SQLite 3。我有一个表，forums，有 150 行，还有一个表，posts，有大约 440 万行。每个帖子都属于一个论坛。我想从每个论坛中选择最新帖子的时间戳。如果我使用 SEL
Golang jsonapi 需要 string 或 int 但 mongo 需要 bson.ObjectId
使用 go 和以下包: github.com/julienschmidt/httprouter github.com/shwoodard/jsonapi gopkg.in/mgo.v2/bson
sql-server - 同样的 SQL 请求，CockroachDB 需要 4min SQL Server 需要 35ms。我错过了什么吗？
The database仅包含 2 个表: 钱包(100 万行) 事务(1500 万行) CockroachDB 19.2.6 在 3 台 Ubuntu 机器上运行每个 2vCPU 每个 8GB R
c++ - std::iter_swap 需要 ValueSwappable args vs std::swap 需要 Move Assignable args
我很难理解为什么在下面的代码中直接调用 std::swap() 会导致编译错误，而使用 std::iter_swap 编译却没有任何错误. 来自 iter_swap() versus swap() -
oracle - SELECT 需要 100 毫秒； CREATE table as select - 或 - INSERT into select 需要 15 分钟
我有一个非常简单的 SELECT *用 WHERE NOT EXISTS 查询条款。 SELECT * FROM "BMAN_TP3"."TT_SPLDR_55E63A28_59358" SELECT
css - Sass 循环 @import，a.scss 需要 b.scss 上的类，b.scss 需要 a.scss 上的类
我试图按部分组织我的 .css 文件，我需要从任何文件访问文件组中的任何类。在 Less 中，我可以毫无问题地创建一个包含所有文件导入的主文件，并且每个文件都导入主文件，但在 Sass 中，我收到一个
redis - Microsoft.AspNet.SignalR.Redis 需要 StackExchange.Redis.StrongName，但是 StackExchange.Redis.Extensions.Core 需要 StackExchange.Redis
Microsoft.AspNet.SignalR.Redis 和 StackExchange.Redis.Extensions.Core 在同一个项目中使用。前者需要StackExchange.Red
ruby-on-rails - sass-rails 需要 sprockets 2.0.0 但 rails 4.1.0 需要 sprockets 2.12.1
这个问题在这里已经有了答案: Updating from Rails 4.0 to 4.1 gives sass-rails railties version conflicts (4 个答案) 关
需要 Azure 发布管道身份验证
我们有一些使用 Azure DevOps 发布管道部署到的现场服务器。我们已经使用这些发布管道几个月了，没有出现任何问题。今天，我们在下载该项目的工件时开始出现身份验证错误。部署组中的节点显示在线，
需要 Firebase 索引但未提供链接
Tip: instead of creating indexes here, run queries in your code – if you're missing any indexes, you
需要 Elm 语法帮助
你能解释一下 Elm 下一个声明中的意思吗？ (=>) = (,) 我在 Elm architecture tutorial 的例子中找到了它最佳答案这是中缀符号。实际上，这定义了一个函数 (=>
需要 .NET 程序集查看器
我需要一个 .NET 程序集查看器，它可以显示低级详细信息，例如元数据表内容等。最佳答案 ildasm 是 IL 反汇编程序，具有低级托管元数据 token 信息。安装 Visual Studio
需要 VBA 循环逻辑
我有两个列表要在 Excel 中进行比较。这是一个很长的列表，我需要一个 excel 函数或 vba 代码来执行此操作。我已经没有想法了，因此转向你: **Old List** A
.net - 需要.NET库以将TIFF文件转换为PDF
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想要改善这个问题吗？更新问题，以便将其作为on-topi
需要 XML 命名空间吗？
我正在学习 xml 和 xml 处理。我无法很好地理解命名空间的存在。我了解到命名空间帮助我们在 xml 中分离相同命名的元素。我们不能通过具有相同名称的属性来区分元素吗？为什么命名空间很重要或需要
需要 Azure 端口吗？
我搜索了 Azure 文档、各种社区论坛和 google，但没有找到关于需要在公司防火墙上打开哪些端口以允许 Azure 所有组件(blob、sql、compute、bus、publish)的简洁声明

首页

博学

6Ren·AI

商城

javascript - ClassList 在 IE9 中不起作用。需要替代功能