[英]How to change Icon of collapse and expand?
我的代碼在下面,我想在折疊和展開完成后上下更改圖標。 但不知何故它不起作用。
<div class="attach-link">
<a href="javascript:void(0);" *ngIf="fileData.fileDataType.canAttach && !isFinancialEntity" (click)="openFileInput(i)">
<i class="fa fa-plus"></i> Add Attachment</a>
<input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect [uploader]="fileData.uploader" (onFileSelected)="onFileSelected()"
/>
<a class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
<i class="fa fa-angle-up" ></i>
Attachments [{{fileData.fileList.length}}] </a>
</div>
並添加了腳本:
$('a[data-toggle="collapse"]').click(function () {
//$(this).find('i').addClass('fa fa-angle-up').removeClass('fa fa-angle-down');
$(this).find('i .fa fa-angle-up').toggleClass('fa fa-angle-down');
});
我不知道是什么問題。 任何幫助將不勝感激。 非常感謝。
下面是在 angular 中上下折疊的示例代碼。
<div class="attach-link">
<a href="javascript:void(0);" (click)="openFileInput(i)">
<i class="fa fa-plus"></i> Add Attachment</a>
<input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect (onFileSelected)="onFileSelected()"
/>
<br>
<a (click)="collapse=!collapse" class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
<i class="fa" [ngClass]="{'fa-angle-up': collapse, 'fa-angle-down': !collapse}"></i>
Attachments {{fileData.fileList.length}}
</a>
</div>
控制器
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 5';
collapse:boolean =true;
}
添加到@sharma-vikram 答案中,如果有人想解決上面解釋的展開折疊問題,對於循環中的多個元素,可以按如下方式完成。 觀察:這是一個簡單的解決方案,不使用 ngbCollapse 或材料。
模板(html):
...
<div *ngFor="let item of items">
<div class="row">
<div class="col" (click)="toggle(rowItem)" >
<i class="fa" [ngClass]="{'fa-plus': rowItem.classList.contains('d-none'), 'fa-minus': !rowItem.classList.contains('d-none')}"></i>
</div>
</div>
<div class="row" #rowItem>
Value
</div>
</div>
控制器(ts):
...
public toggle( element: HTMLElement) {
element.classList.toggle('d-none');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.