使用CSS和JavaScript创建HTML折叠手风琴 [英] Creating an HTML collapse accordion with CSS and JavaScript
问题描述
我正在尝试创建一个手风琴，但是我只设法使第一个可折叠按钮正常工作，而其他可折叠按钮不仅不起作用-它们也根本不显示.
I am trying to create an accordion, yet I only managed to get the first collapsible button to work properly while the other collapsible buttons not only don't work - they also don't show up at all .
当我删除内容"的CSS时，变量，则所有内容均正确显示，而天"按钮是不可点击的(不要做应该做的事)
When I delete the css for the "content" variable , all the content shows properly, yet the "day" buttons are unclickable (dont do what theyre supposed to)
我尝试了一些代码，但对JS不太了解，所以我从W3Schools页面复制了JS代码(当然是我自己制作了组件)，因此我很难理解它们的工作原理和解决方法.
I have tried a few codes and not knowing JS very well, I copied the JS code from a W3Schools page (while of course making the components myself) and thence I struggle to understand how they work and how I can fix it.
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代码，但这也不起作用.与第一个选项不同，在第一个选项中，它仅显示第一个按钮和第一个组件-在这里它显示了所有打开的组件-但没有天".按钮似乎是可点击的.
I also tried using the Bootstrap library and deleting the js code, but this doesnt work either. Unlike the first option, in which it only shows the first button and the first component - here it shows all the components open - yet no "day" button seems to be clickable.
<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的完整代码:
Full code with 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代码.
Note 1: I am using PHP values to construct the components that make up the "content" class, but didn't include the PHP code here.
注2:我仍然是社区和Web开发的新手，我一点也不了解jQuery或高级CSS，只了解基本的JS.如果有涉及它们的更简单的解决方案，我还是会尝试实施它们.
Note 2: I am still new to the community and to web development and I don't know jQuery or advanced CSS at all and only know basic JS. If there are easier solutions involving them I will try to implement them anyway.
注3:时间变量可以正常工作，我认为问题不在这里
Note 3: the time variable works fine and I don't think the problem lies here
我将不胜感激.谢谢.
推荐答案
好吧，你可以这样做:
var acc = document.getElementsByClassName("daytitle");
var i;
var x = document.getElementById("content1");
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";
}
if (x.style.display === "none") {
x.style.display = "block";
}
});
}
function collapse() {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}.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 id="content1" 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="collapse()">Remove Attraction</button>
</div>
</div>
</div>但是此答案的唯一问题是，折叠内容后，要恢复内容，您必须双击天"按钮，否则它将无法正常工作.
but the only problem with this answer is that after you collapse the content, to bring it back up you will have to double click the day button, other than that it should work.
这篇关于使用CSS和JavaScript创建HTML折叠手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
