html ul li 首页渲染多条数据 但只展示八条，其余的数据全部隐藏，通过icon图标 进行展示

   <div  style="float: left;" id="showMore"> 展开 </div>

 <div  style="float: left;“id="hideLess"> 收起 </div>

var data = document.querySelectorAll('.allbox .item h3 a');

        const list = document.querySelectorAll('.all-sort-list .item h3 a');

        data.forEach((item, index) => {

            if (index === 7) {

                document.querySelector("#showMore").style.display = "block"

            }

        });

            var listItems = document.querySelectorAll('.all-sort-list .item');

            if (listItems.length > 8) {

                for (var i = 8; i < listItems.length; i++) {

                    listItems[i].style.display = 'none';

                }

                document.getElementById('showMore').style.display = 'block';

                document.getElementById('hideLess').style.display = 'none';

            }

    //    展开

        document.getElementById('showMore').addEventListener('click', function () {

            var listItems = document.querySelectorAll('.allbox .item');  

            if (listItems.length > 8) {

                for (var i = 8; i < listItems.length; i++) {

                    listItems[i].style.display = 'block';  

                    listItems[i].className+= " wrap_item";  

                }

                document.getElementById('showMore').style.display = 'none';

                document.getElementById('hideLess').style.display = 'block';

            }  

        });

        // 收起

        document.getElementById('hideLess').addEventListener('click', function () {

            var listItems = document.querySelectorAll('.all-sort-list .item');

            if (listItems.length > 8) {

                for (var i = 8; i < listItems.length; i++) {

                    listItems[i].style.display = 'none';

                }

                document.getElementById('showMore').style.display = 'block';

                document.getElementById('hideLess').style.display = 'none';

            }

        });

        .wrap1 {

            bottom: 0px;

            left: 0px;

            float: left;

            position: relative;

            z-index: 3;

            width: 198px;

            height: 100%;

            background: #2a86dd;

        }

        .allbox {

            position: relative;

            width: 195px;

            border: 1px solid #2a86dd;

            border-top: none;

            padding: 1px;

        }

        #showMore {  

            display: inline-block;

            width: 20px;

            height: 20px;  

            color: #fff; 

            display: none;  

        }

        #hideLess{  

            display: inline-block;

            width: 20px;

            height: 20px;   

         color: #fff;

            display: none;  

        }

 .item:hover #showMore {

    color: #f00;

 }

 .item:hover #hideLess {

    color: #f00;

 }

 .wrap_item{

    width: 200px;

    height: 45px;

    line-height: 45px;

    background-color: #09f;

    color: #fff;

 }

数据结构

   <div class="boxCur">

            <div class="wrap1">

                <div class="allbox">

                    <div class="item bo">