需求：列表型页面，但是每一个列表包含了多个子项，并且点击父项子项显示隐藏
html代码
```
<div>
<span class="bookContentTitle">1. 环保法规</span>
<ion-item class="bookContentHeader">
<div class="bookHeader" ng-click="click=!click">
<span>大气污染防治</span>
<img ng-show="!click" src="img/zhan.png" alt="" class="itemIons">
<i ng-show="click" class="icon itemImg ion-ios-arrow-down"></i>
</div>
<ion-list ng-show="click" class="bookContentHeaderList">
<ion-item class="item-button-right bookContentHeaderItem" class="">
<span class="itemFlex">
<img style="width: 20px;margin-right: 10px;" src="img/pdf.png" alt="">
<span class="itemFont">入冬环境</span>
</span>
<button class="itemBtn" ng-click="open()">下载</button>
</ion-item>
<ion-item class="item-button-right bookContentHeaderItem" class="">
<span class="itemFlex">
<img style="width: 20px;margin-right: 10px;" src="img/pdf.png" alt="">
<span class="itemFont">入冬环境</span>
</span>
<button class="itemBtn">下载</button>
</ion-item>
</ion-list>
</ion-item>
</div>
```
样式类
```
.bookContent{
background: #f5f5f5;
}
.bookContentTitle{
color: #6190E8;
font-size: 0.9rem;
margin: 20px 10px 10px;
display: block;
}
.bookContentHeader{
border: none;
padding: 0;
}
.bookHeader{
height: 50px;
line-height: 50px;
font-size: 1rem;
padding-left: 20px;
font-weight: bold;
color: #202020;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.itemIons{
margin-right: 10px;
width: 16px;
height: 16px;
margin-top: 0;
}
.itemImg{
margin-right: 20px;
font-size: 1.5rem;
color: #ccc;
}
.bookClickStyle{
height: 30px;
}
.bookContentHeaderList{
/*margin: 10px;*/
background: #f5f5f5;
}
.itemFlex{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.itemFont{
font-size: 0.9rem;
color: #202020;
font-weight: bold;
}
.itemBtn{
border: none;
background: linear-gradient(to right, #6190E8, #A7BFE8)!important;
padding: 5px 16px;
color: #fff;
font-size: 0.8rem;
border-radius: 100px;
}
.bookContentHeaderItem{
background: #f9f9f9;
border: none;
border-bottom: 2px solid #f1f1f1;
padding: 10px 20px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
```
网友评论