gpt4 book ai didi

javascript - 为什么我的 Accordion 打不开

转载 作者:太空宇宙 更新时间:2023-11-04 02:02:22 24 4
gpt4 key购买 nike

从这里的例子http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion我想让我的 Accordion 最初打开,所以我在类里面添加了 w3-show 风格,但为什么它不起作用?

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container">
<h2>Accordions</h2>
<p>An accordion is used to show (and hide) content that is broken into sections:</p>

<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align w3-show">Open Section 1</button>
<div id="Demo1" class="w3-accordion-content w3-container">
<h4>Section 1</h4>
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align w3-show">Open Section 2</button>
<div id="Demo2" class="w3-accordion-content w3-container">
<h4>Section 2</h4>
<p>Some other text..</p>
</div>
</div>
</div>

<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>

</body>
</html>

最佳答案

您的 w3-show 类必须像这样在容器 Demo2 和 Demo1 上:

    <button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align">Open Section 2</button>
<div id="Demo2" class="w3-accordion-content w3-container w3-show">

在浏览器中使用 F12 检查您的 html 代码时,您可以看到 w3-show 类在您的 demo-div 上切换

关于javascript - 为什么我的 Accordion 打不开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41526570/

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