Складной Аккордеон в Angular БЕЗ кода JS, но только HTML.Всякий раз, когда я нажимаю кнопку, это ничего не делает.Пожалуйста, решите это - PullRequest
Новая
       6

Складной Аккордеон в Angular БЕЗ кода JS, но только HTML.Всякий раз, когда я нажимаю кнопку, это ничего не делает.Пожалуйста, решите это

0 голосов
/ 27 февраля 2019

Я пытаюсь добавить кнопку Accordion на мою веб-страницу, используя приведенный ниже HTML-код.В настоящее время я реализую это в очень простом масштабе без использования кода JavaScript с этим фрагментом аккордеона.Кнопка просто щелкает и ничего не делает, и базовое свертывание не происходит, а также не реализована функция аккордеона.Пожалуйста, помогите мне в реализации этого!

<div class="panel panel-default">
        <div class="panel-heading">
            <button class="btn btn-primary" type="button"
                data toggle="collapse" data-target="#collapseButtonExample" aria- 
                expanded="true" aria-controls="collapseExample">Question 
            </button>
        </div>

        <div class="collapse" id="collapseButtonExample" >
            <div class="card card-body">
                <p></p>
            </div>
        </div>
    </div>

1 Ответ

0 голосов
/ 27 февраля 2019

Примерно так будет работать, если есть один элемент 

<div class="panel panel-default">
        <div class="panel-heading">
            <button class="btn btn-primary"  type="button" #btn (click)="btn.toggle = !btn.toggle"
              >Question 
            </button>
        </div>

        <div  [ngClass]="{collapse:!btn.toggle}" >
            <div class="card card-body">
                <p>1# something</p>
            </div>
        </div>
    </div>

, если у вас много элементов, этот трюк будет работать 

<div class="panel panel-default" *ngFor="let i of [1,2,3,4]">
        <div class="panel-heading">
            <button class="btn btn-primary"  type="button" #btn (click)="btn.toggle = !btn.toggle"
              >Question 
            </button>
        </div>

        <div  [ngClass]="{collapse:!btn.toggle}" >
            <div class="card card-body">
                <p>{{i}}# something</p>
            </div>
        </div>
    </div>

демонстрация stackblitz ??

...