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

Question

I have implemented collapsible in plain html page as follow: 我已经实现了可折叠的纯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 Fiddle: https://jsfiddle.net/c2r70eh6/4/ JS小提琴： https ： //jsfiddle.net/c2r70eh6/4/

But when I write same code in angular application, the collapsible doesnt expand. 但是当我在有角度的应用程序中编写相同的代码时，可折叠性不会扩展。 While writing in Angular- I put html code in html file of that component, CSS in css file of that component and JS I copied in index.html file. 在用Angular编写时，我将html代码放在该组件的html文件中，将CSS放在该组件的css文件中，并将JS复制到index.html文件中。

Its working fine in simple html file. 在简单的html文件中可以正常工作。 But not in angular. 但不是成角度的。 I checked all the ids they are correct. 我检查了所有ID是否正确。

Need your help. 需要你的帮助。 Thanks in advance! 提前致谢！

Answer 1

I'm not really in support of what you're doing right now. 我不太支持您现在正在做的事情。 But just for the sake of making it work, here's what you'll need to do in the Component Class: 但是只是为了使其工作，这是在Component Class中需要做的事情：

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";
        }
      }
    }
  }

}

Here's a Working Sample StackBlitz for your ref. 这是供您参考的工作样本StackBlitz 。

Answer 2

You completely do not need the angular at all to collapse the panels - you can do it with straight css. 您完全不需要角形即可折叠面板-您可以使用直的CSS来做到这一点。

all you have to do is toggle the active class on the button click and then use the direct sibling combinator to target the next div and style it to be open or shut 您所要做的就是单击按钮时切换活动类，然后使用直接同级组合器定位下一个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 个解决方案

解决方案1
2 已采纳 2019-06-19 10:41:26

解决方案2
0 2019-06-19 11:15:30

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-06-19 10:41:26

解决方案2 0 2019-06-19 11:15:30

解决方案1
2 已采纳 2019-06-19 10:41:26

解决方案2
0 2019-06-19 11:15:30