Javascript 可折叠的CSS和JS在Angular应用程序中不起作用
我在纯html页面中实现了可折叠，如下所示：Javascript 可折叠的CSS和JS在Angular应用程序中不起作用,javascript,html,css,angular,Javascript,Html,Css,Angular,我在纯html页面中实现了可折叠，如下所示： <!DOCTYPE html> <html> <head> <title></title> <style> button.accordion { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border:
<!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>
手风琴{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#555；
}
按钮。手风琴：之后{
内容：“\002B”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
}
按钮。手风琴。激活：之后{
内容：''；
背景图片：url（'download.jpg'）；
显示：内联块；
背景尺寸：30px 30px；
宽度：30px；
高度：30px；
变换：旋转（180度）；
}
分区小组{
填充：0 18px；
背景色：#f1f1；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
* {
框大小：边框框；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
}
a{
文字装饰：无；
颜色：白色；
}
可折叠
单击该按钮可在显示和隐藏可折叠内容之间切换
一些可折叠的内容。单击该按钮可在显示和隐藏可折叠内容之间切换。Lorem ipsum dolor sit amet，一些可折叠内容物。单击该按钮可在显示和隐藏可折叠内容之间切换
SDFSDFSDT amet，一些可折叠内容。单击该按钮可在显示和隐藏可折叠内容之间切换
QQQQQPSIBLE内容。康塞奎特
ZZZZZZZZ可浏览内容。康多康塞卡特
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i我需要你的帮助。提前谢谢 我并不真正支持你现在所做的事情。但为了使其正常工作，您需要在Component类中执行以下操作：
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";
}
}
}
}
}
从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
acc=document.getElementsByClassName（“accordion”）；
恩戈尼尼特（）{
for（设i=0；i这是给你的裁判的一封信
你完全不需要角度来折叠面板-你可以用笔直的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；
对于（i=0；ibutton.accordion{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#555；
}
按钮。手风琴：之后{
内容：“\002B”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
}
按钮。手风琴。激活：之后{
内容：''；
背景图片：url（'download.jpg'）；
显示：内联块；
背景尺寸：30px 30px；
宽度：30px；
高度：30px；
变换：旋转（180度）；
}
.小组{
填充：0 18px；
背景色：#f1f1；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
.accordion.active+面板{
最大高度：500px；
过渡段：最大高度0.2s放松；
}
* {
框大小：边框框；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
}
a{
文字装饰：无；
颜色：白色；
}可折叠
单击按钮以切换可折叠内容
一些可折叠的内容。单击该按钮可在显示和隐藏可折叠内容之间切换。Lorem ipsum dolor sit amet，一些可折叠内容物。单击该按钮可在显示和隐藏可折叠内容之间切换。
SDFSDFSDT amet，一些可折叠内容。单击该按钮可在显示和隐藏可折叠内容之间切换
QQQQQPSIBLE内容。康塞奎特
ZZZZZZZZ可浏览内容。康多康塞卡特
nextElementSiblinghtmldevelem