Как сделать Аккордеон Динамичным - Используя Angular 6 - PullRequest
Новая
       6

Как сделать Аккордеон Динамичным - Используя Angular 6

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

  1. Как сделать Аккордеонный Динамический, как если бы мы щелкали по определенной панели, тогда он должен отображать только эту часть

  2. Как мы можем развернуть весь коллапс, нажав натег.

enter image description here

enter image description here enter image description here класс экспорта HomeComponentреализует OnInit {

  public homeDataviews = [];
  notes: Array<Note>;

  constructor(private _homeDataService: HomeDataService) {
    this.notes = [];
   }

  ngOnInit() {
    this._homeDataService.getViewData()
      .subscribe(data => this.homeDataviews = data);

  }

Заранее спасибо:)

Ответы [ 3 ]

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

Вам необходимо привязать атрибуты, на которые опирается начальная загрузка, чтобы переключать элементы div соответственно:

  • заголовок панели: id, href, aria-controls
  • panel-collapse: id, aria-labeleledby

Попробуйте этот пример: 

<div class="panel-heading" role="tab" [id]="'heading'+data.id">
    <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" [href]="'#collapse'+data.id" aria-expanded="true" [attr.aria-controls]="'collapse'+data.id">
            {{data.header}}
        </a>
    </h4>
</div>
<div [id]="'collapse'+data.id" class="panel-collapse collapse" role="tabpanel" [attr.aria-labelledby]="'heading'+data.id">
    <div class="panel-body">
        {{data.content}}
    </div>
</div>
0 голосов
/ 27 февраля 2019

Привет, Рахул, и добро пожаловать в Stack Overflow.

Чтобы увидеть, что происходит с вашим примером кода, нам необходимо иметь возможность ознакомиться с любым кодом, связанным с проблемой.и предмет, который вы пытаетесь достичь.(См .: Сохраните код вопроса " минимальный ")

Я не очень разбираюсь в Angular, поэтому я не уверен, смогу ли я вам помочь в этом отношении.Однако, если вам не требуется, чтобы ваш предмет работал с Angular-кодом, я нашел идеально работающий пример аккордеона, использующего только HTML, CSS и JavaScript в W3Schools: Ссылка .

Пожалуйста, дайте мнезнать, если у вас есть какие-либо дополнительные вопросы.

JSFiddle 

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
0 голосов
/ 27 февраля 2019

Я рекомендую вам использовать свойство Data-parent (несколько примеров), здесь

Если вы хотите сделать это вручную, Bootstrap свернутые ссылки здесь, свернуть Ссылки

<script>
$(document).ready(function(){
  $(".btn-primary").click(function(){
    $(".collapse").collapse('toggle');
  });
  $(".btn-success").click(function(){
    $(".collapse").collapse('show');
  });
  $(".btn-warning").click(function(){
    $(".collapse").collapse('hide');
  });
});
</script>

Или вы можете управлять мультиплексными панелями, 

$("#collapseOne, #collapseTwo").collapse('hide'); //Close multiple
...