gpt4 book ai didi

javascript - Html可折叠点击不展开

转载 作者:行者123 更新时间:2023-11-27 23:38:18 26 4
gpt4 key购买 nike

我的代码看起来不错(或者可能不是),当我在在线平台上尝试它时它似乎可以工作,但当我在本地运行它时它不起作用。例如,当我在 w3school 中输入确切的代码时,在编辑器中尝试它似乎没有问题。

这是我正在使用的 javascript 文件:"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js "

当我尝试在线查找时,我不断得到答案,说您需要一个我确信我有的 jquery 文件。

非常感谢您的帮助。

编辑:在我之前的代码中,我使用了“content2”而不是“content”。那是个错误,我只是在乱搞我的代码,忘了改回来。它仍然不适用于“内容”。


<div class="prtbox">
<img src="graphics/tmp/xx1.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

<div class="prtbox">
<img src="graphics/tmp/xx2.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

<div class="prtbox">
<img src="graphics/tmp/xx3.png"class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

.partnerimg{
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox{
padding-bottom: 30px;
width: 33%;
display: inline-block;
}

.partnerdesc{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
var coll = document.getElementsByClassName("partnerimg");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {

var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}

编辑:由于问题似乎出在我这边的代码上,我没有在此处显示,因此我将在此处列出我的 .html 代码。我只用了一个html和css文件,我的整个css文件都显示出来了

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

<script>
var coll = document.getElementsByClassName("partnerimg");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {

var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}
</script>
<link rel="stylesheet" type="text/css" href="css/index_styles2.css">
</head>

<body>


<div class="prtbox">
<img src="graphics/tmp/ca.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

<div class="prtbox">
<img src="graphics/logob.eps" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</body>
</html>

最佳答案

尝试将您的脚本放在 HTML 文档的底部,至少在它使用的元素之后。它可能在 DOM 完成加载之前运行,因此尚未创建元素,导致它抛出错误。

关于javascript - Html可折叠点击不展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57139958/

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