我在純 html 頁(yè)面中實(shí)現(xiàn)了可折疊,如下所示:<!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/但是當(dāng)我在 angular 應(yīng)用程序中編寫(xiě)相同的代碼時(shí),可折疊的不會(huì)擴(kuò)展。在用 Angular 編寫(xiě)時(shí)-我將 html 代碼放入該組件的 html 文件中,將 CSS 放入該組件的 css 文件中,并將 JS 復(fù)制到 index.html 文件中。它在簡(jiǎn)單的 html 文件中工作正常。但不是有角度的。我檢查了所有的ID,它們都是正確的。需要你的幫助。提前致謝!
可折疊的 CSS 和 JS 在 Angular 應(yīng)用程序中不起作用
眼眸繁星
2021-06-27 12:39:46