堆栈内存溢出
  简体   繁体   English

使用 CSS 和 JavaScript 创建 HTML 折叠手风琴

[英]Creating an HTML collapse accordion with CSS and JavaScript

 原文  2020-11-30 17:48:11  2   2    javascript/ html/ css/ bootstrap-4/ accordion

问题描述

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)当我删除“内容”变量的 css 时，所有内容都正确显示，但“日”按钮无法点击（不要做他们应该做的）

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.我尝试了一些代码，但不太了解 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>

I also tried using the Bootstrap library and deleting the js code, but this doesnt work either.我也尝试使用 Bootstrap 库并删除 js 代码，但这也不起作用。 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: 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.注 1：我使用 PHP 值来构造构成“内容”class 的组件，但此处未包含 PHP 代码。

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.注 2：我对社区和 web 开发还是新手，我不知道 jQuery 或高级 CSS，只知道基本的 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注意 3：时间变量工作正常，我认为问题不在这里

I would appreciate help.我会很感激帮助。 Thank you.谢谢你。

2 个解决方案

解决方案1
 1 已采纳  2020-11-30 20:21:19

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.但这个答案的唯一问题是，在您折叠内容后，要将其恢复，您必须双击日期按钮，否则它应该可以工作。

解决方案2
 0  2020-11-30 19:54:50

This accordion doesn´t use any coded javascript.这个手风琴不使用任何编码的 javascript。

The idea is that the state of each content container is controled by the status of the input.这个想法是每个内容容器的 state 由输入的状态控制。 The input may be either a checkbox, which allows multiple selections, or a radio which will allow only one selection at a time.输入可以是一个复选框，它允许多选，也可以是一个单选，它一次只允许一个选择。 The inputs are grouped by the name property.输入按名称属性分组。

HTML HTML

<div class="wrapper">
    <div class="tab grey">
        <input id="tab-0" type="checkbox" name="tabs">  <!-- set the input type to radio if you want only one accordion open at a time -->
        <label for="tab-0">
            <!-- The text for the accordion title --> 
        </label>
        <div class="tab-content grey">
            <!-- Your content -->
        </div>
    </div>
    <!-- repeat how many tabs as you want -->
</div>

The function of what I deem most relevant will be commented in the code bellow我认为最相关的 function 将在下面的代码中注释

CSS CSS

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}
input {
  /* this makes the input invisible */
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label { 
  position: relative;
  display: flex;
  padding: 0 0 0 0.3em;
  background: #16a085;
  font-weight: bold;
  line-height: 2.5;
  cursor: pointer;
  font-size: 1.5em;
}
.tab-content {
  /* default status invisible (height: 0) */
  max-height: 0;
  overflow: auto;
  background: #1abc9c;
  transition: max-height .35s;
}

/* :checked */
input:checked ~ .tab-content {
/* if the input next to the tab is checked, increase height */
  max-height: 25em;
}
/* Icon - here are some nifty stuff... makes the de sign at the end of the label rotate if the content is visible or not */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

This construct with a little css tinkering can become a tabbed layout.这种带有一点 css 修补的结构可以成为选项卡式布局。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 javascript JavaScript折叠手风琴 - html javascript collapse accordion 通过 Javascript 创建手风琴 - Creating an accordion through Javascript JS HTML CSS 手风琴 - JS HTML CSS Accordion HTML JS手风琴折叠其余的并警告活动的 - HTML JS Accordion to collapse the remaining and alert the active javascript 允许我折叠扩展的手风琴 - javascript to allow me to collapse accordion that is extended Javascript 手风琴在新标签打开时折叠 - Javascript accordion collapse on new tab open 如何使用 javascript 展开和折叠模板手风琴？ - How to expand and collapse template accordion using javascript? JavaScript和CSS手风琴列表 - JavaScript & CSS Accordion List 带CSS过渡的JavaScript手风琴 - JavaScript accordion with css transition 折叠导航栏不适用于HTML，CSS和JavaScript - Collapse navbar doesn't work with HTML, CSS, and JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM