因此,我试图在单击它时切换一个超棒的字体图标(位于带有可折叠卡体的卡头处)。但是,当我单击按钮时,下面的卡体不会折叠,并且在浏览器控制台上出现错误。
错误:
Error: Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at a.t._getParent (collapse.js:300)
at new a (collapse.js:88)
at HTMLDivElement.<anonymous> (collapse.js:345)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.a._jQueryInterface [as collapse] (collapse.js:331)
at HTMLDivElement.<anonymous> (collapse.js:378)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at HTMLElement.<anonymous> (collapse.js:374)
崩溃.js:
const children = [].slice.call(parent.querySelectorAll(selector))
$(children).each((i, element) => {
this._addAriaAndCollapsedClass(
Collapse._getTargetFromElement(element),
[element]
)
})
我的header.php:
<!DOCTYPE html>
<html>
<head>
<title>Web System</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Aldrich|Raleway|Rosario" rel="stylesheet">
</head>
<body>
我的script.js:
$(document).ready(function() {
$("i.fas, fa-plus").click(function() {
$(this).toggleClass("fa-plus fa-minus");
});
});
我的HTML结构:
<div class="col-8">
<div class="card">
<div class="card-header">
<i class="fas fa-plus float-right" id="cardOne" data-toggle="collapse" data-target="#collapseFirst" aria-expanded="true" aria-controls="collapseFirst"></i>
Change image
</div>
<div id="collapseFirst" class="collapse show" aria-labelledby="cardOne" data-parent="#accordion">
<div class="card-body">
<form action="menus.php" method="POST" enctype="multipart/form-data">
<input type="file" name="customAvatar" required>
<input type="submit" value="Salvar">
</form>
</div>
</div>
</div>
</div>
对不起,如果我在这个问题上犯了一些错误,这里很新;)