用原生js实现展开和收起的效果

html代码：

<div class="pull-down-menu w1080">
            <ul class="menu-list" id="menu">
                <li><a href="javascript:void (0);" class="active">推荐</a></li>
                <li><a href="javascript:void (0);">人物</a></li>
                <li><a href="javascript:void (0);">融资</a></li>
                <li><a href="javascript:void (0);">IPO</a></li>
                <li><a href="javascript:void (0);">人工智能</a></li>
                <li><a href="javascript:void (0);">在线教育</a></li>
                <li><a href="javascript:void (0);">文创娱乐</a></li>
                <li><a href="javascript:void (0);">行业</a></li>
                <li><a href="javascript:void (0);">创富</a></li>
                <li><a href="javascript:void (0);">新零售</a></li>
                <li><a href="javascript:void (0);">共享经济</a></li>
                <li><a href="javascript:void (0);">金融科技</a></li>
                <li><a href="javascript:void (0);">医疗健康</a></li>
                <li><a href="javascript:void (0);">体育经济</a></li>
                <li><a href="javascript:void (0);">游戏</a></li>
                <li><a href="javascript:void (0);">互联网出海</a></li>
                <li><a href="javascript:void (0);">企业级服务</a></li>
                <li><a href="javascript:void (0);">社交</a></li>
            </ul>
            <a href="javascript:void (0);" class="unfold-btn flag-up" id="unfold">展开</a>
        </div>

css代码：

.pull-down-menu {
  position: relative;
}

.menu-list {
  width: 100%;
  height: 50px;
  padding-right: 100px;
  overflow: hidden;
  li {
    display: inline-block;
    a {
      margin-right: 30px;
      display: block;
      min-width: 40px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      color: #333;
    }
    a.active, a:hover, a:active, a:visited {
      font-weight: bolder;
      color: #000;
      border-bottom: 4px solid #f5423b;
    }
  }
}

.unfold-btn {
  position: absolute;
  right: 0;
  top: 10px;
  display: block;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #333;
  background: #e2e2e2;
  border-radius: 8px;
}

.flag-up {
  &:before{
    content: '';
    position: absolute;
    right: 7px;
    top: 15px;
    width: 19px;
    height: 11px;
    background: url("./../img/down.jpg") no-repeat top center;
    background-size: 100%;
  }
}

.flag-down {
  &:before{
    content: '';
    position: absolute;
    right: 7px;
    top: 15px;
    width: 19px;
    height: 11px;
    background: url("./../img/up.jpg") no-repeat top center;
    background-size: 100%;
  }
}

js代码：

<script type="text/javascript">
    window.onload = function () {
        let mainMenu = document.querySelector("#menu");
        let menuH = mainMenu.clientHeight;
        let unfoldBtn = document.querySelector("#unfold");
        let classVal = unfoldBtn.getAttribute("class");
        let hflag = 1; // 标记是否隐藏
        unfoldBtn.onclick = function () {
            if (hflag) {  // 当前为收起状态，展开函数
                if (menuH == 50) {
                    let setInt1 = setInterval(function () {
                        menuH += 5;
                        mainMenu.style.height = menuH + "px";
                        if (menuH == 100) {
                            unfoldBtn.innerText = "收起";
                            if (!hasClass(unfoldBtn, 'flag-down')) {
                                classVal = classVal.replace(classVal, "unfold-btn flag-down");
                                unfoldBtn.setAttribute("class", classVal);
                            }
                            hflag = 0;
                            clearInterval(setInt1);
                        }
                    }, 50);
                }
            } else {   // 当前为展开状态，收起
                if (menuH == 100) {
                    let setInt = setInterval(function () {
                        menuH -= 5;
                        mainMenu.style.height = menuH + "px";
                        if (menuH == 50) {
                            unfoldBtn.innerText = "展开";
                            if (!hasClass(unfoldBtn, 'flag-up')) {
                                classVal = classVal.replace(classVal, "unfold-btn flag-up");
                                unfoldBtn.setAttribute("class", classVal);
                            }
                            hflag = 1;
                            clearInterval(setInt);
                        }
                    }, 50);
                }
            }
        };
        function hasClass(element, cls) {
            return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
        }
    }
</script>