Разборные CSS и JS не работают в приложении Angular - PullRequest
Новая
       1

Разборные CSS и JS не работают в приложении Angular

0 голосов
/ 19 июня 2019

Я реализовал разборную простую 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/

Но когда я пишу тот же код в угловом приложении, разборная часть не расширяется.При написании на Angular я помещал html-код в html-файл этого компонента, CSS в css-файл этого компонента, а JS-I копировал в файл index.html.

Он отлично работает в простом html-файле.Но не в угловых.Я проверил все идентификаторы, они верны.

Нужна ваша помощь.Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Я не особо поддерживаю то, что вы делаете сейчас.Но только для того, чтобы заставить его работать, вот что вам нужно сделать в классе компонентов: 

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

}

Вот Рабочий пример StackBlitz для вашего реф.

0 голосов
/ 19 июня 2019

Вам совершенно не нужен угол, чтобы свернуть панели - вы можете сделать это с помощью прямой 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...