Question

我已经在纯HTML页面中实现了可折叠，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title></title>

<style>
button.accordion {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

button.accordion.active, button.accordion:hover {
    background-color: #555;
}

button.accordion:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: '';
    background-image: url('download.jpg');
    display: inline-block;
    background-size: 30px 30px;
    width:30px;
    height:30px;
    transform:rotate(180deg);
}

div.panel {
    padding: 0 18px;
    background-color: #f1f1f1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


* {
  box-sizing: border-box;
}


#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
a{
     text-decoration: none;
     color:white;
}
</style>

</head>
<body>
<h2>Collapsible</h2>
<p>Click the button to toggle between showing and hiding the collapsible content.</p>




<div id="div2">
<button class="accordion"><a href="#">Addq</a></button>
<div class="panel"> 
  <p>Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. Lorem ipsum dolor sit amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. </p>
<button class="accordion"><a href="#">Aollapsible</a></button>
<div class="panel">
  <p>sdfsdfsdfsdt amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. </p>
</div>
<button class="accordion"><a href="#" style="">Dollapsible</a></button>
<div class="panel">
  <p>qqqqqqqqqqqpsible content. consequat.</p>
</div>
<button class="accordion"><a href="#">Qollapsible</a></button>
<div class="panel">
  <p>zzzzzzzzzllapsible content. commodo consequat.</p>
</div>

</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}


</script>


</body>
</html>

JS小提琴：https://jsfiddle.net/c2r70eh6/4/

但是当我在有角度的应用程序中编写相同的代码时，可折叠性不会扩展。在用Angular写作时我将html代码放在该组件的html文件中，该组件的css文件中的CSS和我在index.html文件中复制了JS。

在简单的html文件中可以正常工作。但不是成角度的。我检查了所有ID是否正确。

需要您的帮助。预先感谢！

Answer 1

我真的不支持您现在正在做的事情。但是，为了使它起作用，这是在组件类中需要做的事情：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  acc = document.getElementsByClassName("accordion");

  ngOnInit() {
    for (let i = 0; i < this.acc.length; i++) {
      (<HTMLButtonElement>this.acc[i]).onclick = function () {
        this.classList.toggle("active");
        var panel = <HTMLDivElement>this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      }
    }
  }

}

这是您推荐的Working Sample StackBlitz。

Answer 2

您完全不需要角形即可折叠面板-您可以使用直的CSS来做到这一点。

您要做的就是单击按钮切换活动类，然后使用直接同级组合器定位下一个div并将其样式设置为打开或关闭

.panel {
    padding: 0 18px;
    background-color: #f1f1f1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


.accordion.active + .panel {
    max-height: 500px;
    transition: max-height 0.2s ease-out;
}

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
  }
}

button.accordion {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

button.accordion.active, button.accordion:hover {
    background-color: #555;
}

button.accordion:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: '';
    background-image: url('download.jpg');
    display: inline-block;
    background-size: 30px 30px;
    width:30px;
    height:30px;
    transform:rotate(180deg);
}

.panel {
    padding: 0 18px;
    background-color: #f1f1f1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}



.accordion.active + .panel {
    max-height: 500px;
    transition: max-height 0.2s ease-out;
}


* {
  box-sizing: border-box;
}


#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
a{
     text-decoration: none;
     color:white;
}

<h2>Collapsible</h2>
<p>Click the button to toggle the collapsible content.</p>



<div id="div2">
<button class="accordion"><a href="#">Addq</a></button>
<div class="panel"> 
  <p>Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. Lorem ipsum dolor sit amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. 
<button class="accordion"><a href="#">Aollapsible</a></button>
<div class="panel">
  <p>sdfsdfsdfsdt amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. </p>
</div>
<button class="accordion"><a href="#" style="">Dollapsible</a></button>
<div class="panel">
  <p>qqqqqqqqqqqpsible content. consequat.</p>
</div>
<button class="accordion"><a href="#">Qollapsible</a></button>
<div class="panel">
  <p>zzzzzzzzzllapsible content. commodo consequat.</p>
</div>

</div>

可折叠的CSS和JS在Angular应用中不起作用

2 个答案: