gpt4 book ai didi

bootstrap-5 - Bootstrap Accordion 引发 TypeError : Illegal invocation

转载 作者:行者123 更新时间:2023-12-05 00:44:23 26 4
gpt4 key购买 nike

我有一个这样写的 Accordion

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="editTournamentAccordionWrapper">
<div class="accordion-body">
<iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>

当我第一次点击 Accordion 标题时,accordion 不会打开并且会抛出以下异常

Uncaught TypeError: 'querySelectorAll' called on an object that does not implement interface Element. selector-engine.js:18:59

知道原因吗?据我所知,这是我必须编写的最少代码以使错误出现

最佳答案

TLDR:data-bs-parent 属性中缺少 #

根据Bootstrap documentation , data-bs-parent 接受一个

selector | jQuery object | DOM element

当您为属性传递 data-bs-parent="id" 时,它是纯文本,因此不属于任何类别。结果你得到 Uncaught TypeError: Illegal invocation

工作示例:

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="#editTournamentAccordionWrapper">
<div class="accordion-body">
Card Body
<!-- <iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>-->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

关于bootstrap-5 - Bootstrap Accordion 引发 TypeError : Illegal invocation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67083061/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com