可折叠的 CSS 和 JS 在 Angular 应用程序中不起作用
我在纯 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>
JS小提琴：https : //jsfiddle.net/c2r70eh6/4/
但是当我在 angular 应用程序中编写相同的代码时，可折叠的不会扩展。在用 Angular 编写时-我将 html 代码放入该组件的 html 文件中，将 CSS 放入该组件的 css 文件中，并将 JS 复制到 index.html 文件中。
它在简单的 html 文件中工作正常。但不是有角度的。我检查了所有的ID，它们都是正确的。
需要你的帮助。提前致谢！
眼眸繁星1回答
随时随地看视频慕课网APP
相关分类
JavaScript