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

Question

我正在尝试创建一个手风琴，但我只设法让第一个可折叠按钮正常工作，而其他可折叠按钮不仅不起作用 - 它们也根本不显示。

当我删除“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 值来构建构成“内容”的组件 class，但没有在此处包含 PHP 代码。

注意 2：我对社区和 Web 开发仍然是新手，我根本不知道 jQuery 或高级 CSS，只知道基本的 JS。如果有涉及它们的更简单的解决方案，我无论如何都会尝试实施它们。

注意3：时间变量工作正常，我认为问题不在这里

非常感谢您的帮助。谢谢。

Answer 1

这架手风琴不使用任何编码 javascript。

想法是每个内容容器的状态由输入的状态控制。输入可以是允许多项选择的复选框，也可以是一次只允许一个选择的收音机。输入按名称分组属性.

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>

我认为最相关的功能将在下面的代码中注释

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: "BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

这个构造稍加 css 修补就可以成为选项卡式布局。

Answer 2

好吧，你可以这样做：

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>

但这个答案的唯一问题是，在折叠内容后，要将其恢复，您必须双击日期按钮，除此之外它应该可以工作。

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

Creating an HTML collapse accordion with CSS and JavaScript

html

javascript

css

accordion

bootstrap-4

HTML

CSS