【发布时间】：2021-03-12 16:05:35
【问题描述】：
我正在尝试创建一个手风琴，但我只设法让第一个可折叠按钮正常工作，而其他可折叠按钮不仅不起作用 - 它们也根本不显示。
当我删除 "content" 变量的 css 时，所有内容都正确显示，但 "day" 按钮无法点击（不要做他们应该做的）
我尝试了一些代码，但对 JS 不太了解，我从 W3Schools 页面复制了 JS 代码（当然，我自己制作了组件），因此我很难理解它们是如何工作的以及如何修复它。
var acc = document.getElementsByClassName("daytitle");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
/*
I ALSO TRIED:
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
} */
/*for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
} );
}
*/.daytitle {
width: 100%;
height: 50px;
background-color: #c2c2d6;
border-color: black;
margin-left: 10px;
margin-top: 0px;
font-size: 30px;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 30px;
font-weight: 400;
color: black;
}
.daytitle:hover {
background-color: #555;
}
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}<button class="daytitle"> Day <i class="arrow"></i></button>
<div class="content">
<div id="Attraction1" class="attraction">
<div class="atr_image"><img src="images/oldtown.jpg" alt=""></div>
<div class="atr_container">
<div class="atr_name"><a>Atr Name </a></div>
<div class="atr_region">Atr Region</div>
<div class="atr_desc">
<p>Atr Description</p>
</div>
<div class="atr_time_container">
<div class="atr_time">
<p>3 Hours</p>
</div>
<span class="dot"></span>
<div class="atr_hours">
<p>10:00-13:00</p>
</div>
</div>
<button class="button1" id="R1 " onclick="Remove(this.closest('.attraction'))">Remove Attraction</button>
</div>
</div>
</div>我也尝试使用 Bootstrap 库并删除 js 代码，但这也不起作用。与第一个选项不同的是，它只显示第一个按钮和第一个组件——这里它显示所有打开的组件——但似乎没有“日”按钮是可点击的。
<button class = "daytitle" data-toggle="collapse" data-target="<?php echo "#.content.$l_daynumber" ?>" > <?php echo "Day ". $l_daynumber; ?><i class="arrow"></i></button>
<div id = "<?php echo "content.$l_daynumber" ?>" class = "content">
完整的php代码：
for($u = 0; $u < count($arr);$u++){
$hour = intval($arr[$u]["Time"]);
$time = $time + $hour;
if($l_daynumber < $maxdays)
if($time > 8|| $first_time == 0|| $early_atrtype === 1){
$l_daynumber++;
$first_time = 1;
$time = 0;
$this_hour = 10;
$early_atrtype = 0;
$atr_in_day = 0;
?>
<html>
<button class = "daytitle" data-toggle="collapse" data-target="<?php echo "#.content.$l_daynumber" ?>" > <?php echo "Day ". $l_daynumber; ?><i class="arrow"></i></button>
<div id = "<?php echo "content.$l_daynumber" ?>" class = "content">
</html>
<?php
}
$name = $arr[$u]["Name"];
//$region = $arr[$u]["Region"];
$desc1 = $arr[$u]["Desc"];
$hours = $hour . " Hours";
$nexthour = $this_hour + $hour;
$actual= "$this_hour : 00 - $nexthour: 00";
if(similar_text($arr[$u]["Atrtype"],"157") > 0 && $nexthour > 19){
$early_atrtype = 1;
}
$this_hour = $nexthour;
if($this_hour > 24){
$this_hour = $this_hour - 24;
}
$numofatr++;
$atr_in_day++;
?>
<html>
<div id = "<?php echo "Attraction.R.$numofatr" ; ?>" class = "attraction">
<div class = "atr_image"><img src="images/oldtown.jpg" alt=""></div>
<div class= "atr_container">
<div class = "atr_name"><a><?php echo $name; ?> </a></div>
<div class = "atr_region"><p><?php echo $region;?> </p> </div>
<div class = "atr_desc"><p><?php echo $desc1; ?></p></div>
<div class = "atr_time_container">
<div class = "atr_time"><p><?php echo $hours; ?> </p></div>
<span class= "dot" ></span>
<div class = "atr_hours"><p><?php echo $actual; ?></p></div>
</div>
<button class="button1" id = "<?php echo "R. $numofatr"?> " onclick = "Remove(this.closest('.attraction'))">Remove Attraction</button>
<script>
function Remove(elem){
//var Attraction = document.getElementById("Attraction"+elem);
// Attraction.remove();
// document.getElementById(Attraction).parentNode.removeChild( document.getElementById(Attraction))
elem. remove();
}
</script>
</div>
</div>
<?php
if($time > 8){
?>
</div>
<?php
}
?>
<style>
.content {
}
</style>
<script>
/*for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
} );
}
*/
/*var acc = document.getElementsByClassName("daytitle");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
*/
/*for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
} */
</script>
</html>
注意 1：我使用 PHP 值来构造构成“内容”类的组件，但这里没有包含 PHP 代码。
注意 2：我对社区和 Web 开发还是新手，我根本不懂 jQuery 或高级 CSS，只知道基本的 JS。如果有涉及它们的更简单的解决方案，我无论如何都会尝试实施它们。
注意 3：时间变量工作正常，我认为问题不在这里
我将不胜感激。谢谢。
【问题讨论】：
-
欢迎来到 Stack Overflow！请粘贴呈现的 HTML，而不是 PHP。
-
对不起，你的意思是html在网页中的样子？你能解释一下自己吗（就像我说的那样）
-
您发布的代码仍然包含所有 PHP 变量。在您的网页上查看源代码，然后复制该部分并编辑您的问题以替换您的 HTML 部分。对按钮标记也这样做。
-
我明白你的意思。我想我编辑了它，但是id名称是由php定义并动态生成的，所以我不能删除那部分
-
只有名字和innerhtmls在我的代码中使用php命令，它不应该是问题的原因
标签： javascript html css bootstrap-4 accordion