用checkbox實現多列表的顯示和隱藏

由於上一篇存在bug…
所以就改用checkbox來實現多列表的顯示和隱藏
html代碼：

  <header>覆蓋醫院名單</header>
  <ul class="cover_list">
        <li class="cover_item">
            <div class="provice_count" ><span>上海市（4）</span><input type="checkbox" name="" class="arrow_icon" onclick="toggleHosptial(this)"></div>
            <ul class="item_list">
                <li class="items">
                    <div class="hosptial_info">
                        <p class="hosptial_name">xxxx醫院1</p>
                        <p class="online_time"><span>上線時間</span><span>2020.05.10</span></p>
                    </div>
                   
                </li>
                <li class="items">
                    <div class="hosptial_info">
                        <p class="hosptial_name">xxxx醫院1</p>
                        <p class="online_time"><span>上線時間</span><span>2020.05.10</span></p>
                    </div>
                   
                </li>
                <li class="items">
                    <div class="hosptial_info">
                        <p class="hosptial_name">xxxx醫院1</p>
                        <p class="online_time"><span>上線時間</span><span>2020.05.10</span></p>
                    </div>
                   
                </li>
                <li class="items">
                    <div class="hosptial_info">
                        <p class="hosptial_name">xxxx醫院1</p>
                        <p class="online_time"><span>上線時間</span><span>2020.05.10</span></p>
                    </div>
                   
                </li>
            </ul>
        </li>
        <li class="cover_item">
            <div class="provice_count" ><span>上海市（4）</span><input type="checkbox" name="" class="arrow_icon" onclick="toggleHosptial(this)" checked="false"></div>
            <ul class="item_list" style="display: none;">
                <li class="items">
                    <div class="hosptial_info">
                        <p class="hosptial_name">xxxx醫院1</p>
                        <p class="online_time"><span>上線時間</span><span>2020.05.10</span></p>
                    </div>
                   
                </li>
                <li class="items">
                    <div class="hosptial_info">
                        <p class="hosptial_name">xxxx醫院1</p>
                        <p class="online_time"><span>上線時間</span><span>2020.05.10</span></p>
                    </div>
                   
                </li>
                <li class="items">
                    <div class="hosptial_info">
                        <p class="hosptial_name">xxxx醫院1</p>
                        <p class="online_time"><span>上線時間</span><span>2020.05.10</span></p>
                    </div>
                   
                </li>
                <li class="items">
                    <div class="hosptial_info">
                        <p class="hosptial_name">xxxx醫院1</p>
                        <p class="online_time"><span>上線時間</span><span>2020.05.10</span></p>
                    </div>
                </li>
            </ul>
        </li>
    </ul>

css代碼
css使用rem適配，具體適配規則可以點擊這裏查看CSS通用媒體查詢

     * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background-color: #f5f5f5;
    font-family: 'PingFang SC Regular', 'PingFang SC';
    width: 100%;
    height: 100%;
    min-width: 320px;
    max-width: 480px;
    /* position: relative; */
    /* background-repeat: no-repeat; */
    display: flex;
    flex-direction: column;
    align-items: center;
}
header{
    width: 100%;
    height: 0.8rem;
    background-color: #F6F6F6;
    color: #999999;
    padding: 0 0.3rem;
    line-height: 0.8rem;
    font-size: 0.28rem;
}
.cover_list{
    width: 100%;
    /* height: 5rem; */
}
.cover_item{
    width: 100%;
    margin-bottom: 0.3rem;
    background-color: #fff;
}
.cover_item .provice_count{
    width: 100%;
    height: 0.96rem;
    color: #222222;
    font-size: 0.3rem;
    font-weight: 600;
   display: flex;
   align-items: center;

   padding-left: 0.3rem;
   padding-right: 0.3rem;
   justify-content: space-between;

}
/* .arrow_icon{
    width: 0.4rem;
    height: 0.4rem;
    background-image: url('../images/arrow_down.png');
    background-repeat: no-repeat;
    background-size: cover;
} */

 .arrow_icon[type='checkbox']{
    width: 0.4rem;
    height: 0.4rem;
    /* border: 0.02rem solid #ccc; */
    /* border-radius: 50%; */
    -webkit-appearance: none;
    margin-top: 0.04rem;
    width: 0.4rem;
    height: 0.4rem;
    background-image: url('../images/arrow_down.png');
    background-repeat: no-repeat;
    background-size: cover;
    outline: none;
    border:none;
    
}
.arrow_icon[type='checkbox']:checked{
    width: 0.4rem;
    height: 0.4rem;
    background-image: url('../images/arrow_up.png');
    background-repeat: no-repeat;
    background-size: cover;
    outline: none;
    border:none;
    -webkit-appearance: none;
}
.cover_item .item_list{
    width: 100%;
    padding-left: 0.3rem;
}
.cover_item .item_list .items{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.2rem;
    padding-right: 0.3rem;
    width: 100%;
    /* height: ; */
    border-top: 0.02rem solid #E6E6E6;
}
.hosptial_info{
    /* width: 3rem; */
    height: 0.76rem;

}
.hosptial_name{
    color: #222;
    font-size: 0.3rem;
}
.online_time{
    font-size: 0.24rem;
    color: #999;
}
.online_time span:nth-of-type(2n-1){
    margin-right: 0.08rem;
}
.pay_btn{
    width: 1.3rem;
    height: 0.5rem;
    background: rgba(43, 160, 255, 0.14);
    /* opacity: 0.14; */
    border-radius: 0.04rem;
    color: #2BA0FF;
    font-size: 0.22rem;
    text-align: center;
    line-height:  0.5rem;
}

JS：

  function toggleHosptial(e){
           var sibling = e.parentNode.parentNode.children[1];
          if(e.checked){
              $(e).css({'background-image':'url(' + "../images/arrow_up.png" + ')'});
          }else{
           $(e).css({'background-image':'url(' + "../images/arrow_down.png" + ')'});
          }
          $(sibling).toggle();
      }

圖片可以在這裏獲取Iconfont-阿里巴巴矢量圖標庫
效果圖
默認第一個列表是打開狀態