可以同时展开多个互不影响收起展开

最新推荐文章于 2024-05-20 22:08:52 发布

tommoq

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量51

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_47198950/article/details/130799543

版权

<h1>可以同时展开多个互不影响</h1>
<div>
  <ul>
    <li *ngFor="let i of rankingListData; let idx = index">
       <p>{{i.name}}</p>
       <div [ngClass]="{'more':thisIndex.indexOf(i.id)==-1}">
          <span *ngFor="let a of i.arr">{{a}}</span>
       </div>
       <button nz-button type="button" (click)="show(i.id)">
        {{thisIndex.indexOf(i.id)!=-1 ? '收起' : '展开'}}
      </button>
       <div style="clear:both"></div>
    </li>
  </ul>
</div>

thisIndex:any[]=[];

  show(index:Number) {
    if(this.thisIndex.indexOf(index) == -1){
      this.thisIndex.push(index)
    }else{
      this.thisIndex = this.thisIndex.filter(item => item != index)
    }
  }

  *{
        box-sizing: border-box;
        margin:0;
        padding: 0;
    }
    ul>li{
        list-style: none;
        div{
            display:flex;
            flex-wrap: wrap;align-items:center;justify-content: space-around;
            float:left;
            width: 600px;
            background-color: bisque;
            span{    
                min-width: 50px;
                padding: 0 10px;
                line-height: 30px;
                text-align: center;
            }
        }
        button{
          float: right;
          width:80px;
        }
        p{  float: left;
            width: 210px;
            height: 30px;
            line-height: 30px;
            background: orange;
        }
    }
    .more{
        max-height: 30px;
        overflow: hidden;
        }