HTML
<ul class="select"> <li class="select-list" *ngFor="let panelItem of filterItems;let index=index;"> <dl id="select{{index}}"> <dt>{{panelItem.title}}:</dt> <dd *ngFor="let item of panelItem.items"><a href="javascript:;" (click)="selectItem($event.target)">{{item}}</a></dd> </dl> </li> </ul>
JS
selectItem(obj): void { if ($(obj).parent().hasClass("selected")) { $(obj).parent().removeClass("selected"); } else { $(obj).parent().addClass("selected"); } }
CSS
.button-list-yw-button { margin-right: 8px; } mat-form-field { padding: 10px; } .fa-refresh { width: 1em; height: 1em; border-radius: 50%; } .headers-align .mat-expansion-panel-header-title, .headers-align .mat-expansion-panel-header-description { flex-basis: 0; } .headers-align .mat-expansion-panel-header-description { justify-content: space-between; align-items: center; } mat-form-field { margin-right: 12px; } .check-section { display: flex; align-content: center; align-items: center; height: 60px; flex-wrap: wrap; } .check-margin { margin: 10px; } .example-section { display: flex; align-content: center; align-items: center; height: 60px; } .example-section mat-form-field { width: 45%; } .example-margin { margin: 10px; } /*.mat-expansion-panel-header { height: 30px !important; }*/ mat-accordion .mat-expansion-panel-body { padding: 0 24px !important; } .mat-action-row { padding: 0 8px 0 24px; } .mdc-chip-set { padding: 0 !important; } .mat-form-field-wrapper { padding: 0 !important; } mat-accordion .mat-form-field { padding: 0 !important; } .mat-expansion-panel-spacing { margin: 0px; } .select, .select * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; } body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; } /* select */ .select { padding: 5px 10px; /*border: #ddd 1px solid;*/ border-radius: 4px; /*margin: 5% auto;*/ font-size: 12px } .select li { list-style: none; padding: 10px 0 5px 100px } .select .select-list { border-bottom: #eee 1px dashed } .select dl { zoom: 1; position: relative; line-height: 24px; } .select dl:after { content: " "; display: block; clear: both; height: 0; overflow: hidden } .select dt { width: 126px; margin-bottom: 5px; position: absolute; top: 0; left: -100px; text-align: right; color: #666; height: 24px; line-height: 24px; } .select dt + dd { margin-left: 20px; } .select dd { float: left; display: inline; /*margin: 0 0 5px 5px;*/ padding: 0 5px; } .select a { display: inline-block; white-space: nowrap; /*height: 24px;*/ padding: 0 5px; text-decoration: none; color: #039; border-radius: 2px; } .select a:hover { color: #5a6bf3; background-color: #f3edc2; } .select .selected a { color: #fff; background-color: #5a6bf3; }
效果