首页 前端开发 使用 CSS 和 JavaScript 创建 HTML 折叠手风琴
使用 CSS 和 JavaScript 创建 HTML 折叠手风琴
[英] Creating an HTML collapse accordion with CSS and JavaScript
本文介绍了使用 CSS 和 JavaScript 创建 HTML 折叠手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个手风琴，但我只是设法让第一个可折叠按钮正常工作，而其他可折叠按钮不仅不起作用 - 它们也根本不显示.
当我删除内容"的 css 时，variable ，所有内容都正确显示，但天"按钮无法点击(不要做他们应该做的)
我尝试了一些代码，但不太了解 JS，我从 W3Schools 页面复制了 JS 代码(当然我自己制作了组件)，然后我很难理解它们是如何工作的以及如何修复它.
var acc = document.getElementsByClassName("daytitle");变量 i;for (i = 0; i < acc.length; i++) {acc[i].addEventListener("点击", function() {this.classList.toggle("active");var panel = this.nextElementSibling;如果(panel.style.maxHeight){panel.style.maxHeight = null;} 别的 {panel.style.maxHeight = panel.scrollHeight + "px";}});}/*我也试过:for (i = 0; i
.daytitle {宽度:100%；高度:50px；背景颜色:#c2c2d6；边框颜色:黑色；左边距:10px；边距顶部:0px；字体大小:30px；文本对齐:居中；字体系列:'Oswald'，无衬线；字体大小:30px；字体粗细:400；颜色:黑色;}.daytitle:悬停{背景色:#555；}.内容 {填充:0 18px；背景颜色:白色；最大高度:0；溢出:隐藏；过渡:最大高度 0.2s 缓出；}
日 <i class="arrow"></i></button><div class="内容"><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 名称 </a></div><div class="atr_region">Atr Region</div><div class="atr_desc"><p>Atr 描述</p> <div class="atr_time_container"><div class="atr_time"><p>3小时</p>
<span class="dot"></span><div class="atr_hours"><p>10:00-13:00</p>
<button class="button1" id="R1 " onclick="Remove(this.closest('.attraction'))">Remove Attraction</button>
我也尝试过使用 Bootstrap 库并删除 js 代码，但这也不起作用.与第一个选项不同，在第一个选项中它只显示第一个按钮和第一个组件——这里它显示了所有打开的组件——但没有天"按钮似乎可以点击.
<代码><button class = "daytitle";数据切换=折叠"data-target=" 使用php的完整代码:
<代码>for($u = 0; $u <button class = "daytitle";数据切换=折叠"data-target="<?php}$name = $arr[$u][姓名"];//$region = $arr[$u]["Region"];$desc1 = $arr[$u][Desc"];$hours = $hour ."小时";$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;如果($this_hour > 24){$this_hour = $this_hour - 24;}$numofatr++;$atr_in_day++;?><div id = "<?php echo "Attraction.R.$numofatr";?>>class =吸引力"><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 class = "atr_desc><p><?php echo $desc1;?></p></div><div 类 = 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>
<button class="button1";id = "<?php echo "R.$numofatr"?>"onclick = "Remove(this.closest('.attraction'))">Remove Attraction</button><脚本>功能删除(元素){//var Attraction = document.getElementById("Attraction"+elem);//吸引力.remove();//document.getElementById(Attraction).parentNode.removeChild(document.getElementById(Attraction))元素.消除();}
<?php如果($时间> 8){?>
<?php}?><风格>.内容 {}</风格><脚本>/*for (i = 0; i < coll.length; i++) {coll[i].addEventListener(点击"，function() {this.classList.toggle(活动");var content = this.nextElementSibling;如果(content.style.maxHeight){content.style.maxHeight = null;} 别的 {content.style.maxHeight = content.scrollHeight + px";}});}*//*var acc = document.getElementsByClassName("daytitle");变量 i;for (i = 0; i < acc.length; i++) {acc[i].addEventListener(点击", function() {this.classList.toggle(活动");var panel = this.nextElementSibling;如果(panel.style.maxHeight){panel.style.maxHeight = null;} 别的 {panel.style.maxHeight = panel.scrollHeight +px"；}});}*//*for (i = 0; i < coll.length; i++) {coll[i].addEventListener(点击"，function() {this.classList.toggle(活动");var content = this.nextElementSibling;如果(content.style.display ===块"){content.style.display =无"；} 别的 {content.style.display = 块";}});} */
注 1:我使用 PHP 值来构建构成内容"的组件.类，但这里没有包含 PHP 代码.
注 2:我对社区和 Web 开发仍然是新手，我根本不知道 jQuery 或高级 CSS，只知道基本的 JS.如果有涉及它们的更简单的解决方案，我无论如何都会尝试实施它们.
注意 3:时间变量工作正常，我认为问题不在这里
我将不胜感激.谢谢.
解决方案
好吧，你可以这样做:
var acc = document.getElementsByClassName("daytitle");变量 i;var x = document.getElementById("content1");for (i = 0; i < acc.length; i++) {acc[i].addEventListener("点击", function() {this.classList.toggle("active");var panel = this.nextElementSibling;如果(panel.style.maxHeight){panel.style.maxHeight = null;} 别的 {panel.style.maxHeight = panel.scrollHeight + "px";}如果(x.style.display ===无"){x.style.display = "块";}});}函数折叠(){如果(x.style.display ===无"){x.style.display = "块";} 别的 {x.style.display = "无";}}
.daytitle {宽度:100%；高度:50px；背景颜色:#c2c2d6；边框颜色:黑色；左边距:10px；边距顶部:0px；字体大小:30px；文本对齐:居中；字体系列:'Oswald'，无衬线；字体大小:30px；字体粗细:400；颜色:黑色;}.daytitle:悬停{背景色:#555；}.内容 {填充:0 18px；背景颜色:白色；最大高度:0；溢出:隐藏；过渡:最大高度 0.2s 缓出；}
日 <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 名称 </a></div><div class="atr_region">Atr Region</div><div class="atr_desc"><p>Atr 描述</p> <div class="atr_time_container"><div class="atr_time"><p>3小时</p>
<span class="dot"></span><div class="atr_hours"><p>10:00-13:00</p>
<button class="button1" id="R1" onclick="collapse()">移除吸引力</button>
但这个答案的唯一问题是，在折叠内容后，要将其恢复，您必须双击日期按钮，否则它应该可以工作.
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 .
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)
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>
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">
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>
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.
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.
Note 3: the time variable works fine and I don't think the problem lies here
I would appreciate help. Thank you.
解决方案
Well, you could do:
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屋！
查看全文
