我的w3 Accordion菜单在谷歌chrome中没有展开？
我的w3 Accordion菜单在谷歌chrome中没有展开？
提问于 2020-06-17 09:52:07
我的手风琴菜单似乎可以在火狐上使用，但在chrome上就不行了。当点击它时，它不会展开。这是使用chrome inspect时的错误:未在HTMLButtonElement.onclick中定义ReferenceError: myAccFunc。我使用了w3.css中的代码。
下面是html：
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>
My Homework Site
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src = "js/Site.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "css/style.css"/>
<div id="container" class = "row" style="height: 9000px;">
<div id="menu" class = "col" style ="max-width: 210px; height: 100%;">
<div class="menu">
</div>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">
Labs <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card">
<a href="labs/lab3/" class="w3-bar-item w3-button">Lab3</a><br />
<a href="labs/lab4/" class="w3-bar-item w3-button">Lab4</a><br />
<a href="labs/lab5/" class="w3-bar-item w3-button">Lab5</a><br />
<a href="labs/lab6/" class="w3-bar-item w3-button">Lab6</a><br />
<a href="labs/lab7/" class="w3-bar-item w3-button">Lab7</a><br />
<a href="labs/lab8/" class="w3-bar-item w3-button">Lab8</a><br />
<a href="labs/lab9/" class="w3-bar-item w3-button">Lab9</a><br />
<a href="labs/lab10/" class="w3-bar-item w3-button">Lab10</a><br />
</div>这是Javascript：
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-17 10:08:45
在DOM准备就绪之前，有多种方法可以尝试加载脚本。
您可以使用window.functionName = function(){}或$(document).ready(function() {}
window.myAccFunc = function() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>
My Homework Site
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src = "js/Site.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "css/style.css"/>
<div id="container" class = "row" style="height: 9000px;">
<div id="menu" class = "col" style ="max-width: 210px; height: 100%;">
<div class="menu">
</div>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">
Labs <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card">
<a href="labs/lab3/" class="w3-bar-item w3-button">Lab3</a><br />
<a href="labs/lab4/" class="w3-bar-item w3-button">Lab4</a><br />
<a href="labs/lab5/" class="w3-bar-item w3-button">Lab5</a><br />
<a href="labs/lab6/" class="w3-bar-item w3-button">Lab6</a><br />
<a href="labs/lab7/" class="w3-bar-item w3-button">Lab7</a><br />
<a href="labs/lab8/" class="w3-bar-item w3-button">Lab8</a><br />
<a href="labs/lab9/" class="w3-bar-item w3-button">Lab9</a><br />
<a href="labs/lab10/" class="w3-bar-item w3-button">Lab10</a><br />
</div>
Stack Overflow用户
发布于 2020-06-17 10:13:13
这是因为您的脚本是在加载html之后运行的，您需要执行以下操作：
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>
My Homework Site
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css" />
<body>
<p> some html</p>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="js/Site.js"></script>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62420263
复制相关文章
相似问题
腾讯云开发者
