菜单展开折叠按钮

展开折叠按钮

效果

代码

• css

.box {
        margin: 0 auto;
        width: 22px;
        height: 20px;
        /* background-color: yellow; */
        position: relative;
      }
      span {
        display: inline-block;
        height: 2px;
        width: 22px;
        line-height: 0px;
        background-color: red;
        margin-bottom: 0px;
        transition: all 0.3s ease-out 0s;
        position: absolute;
        transform-origin: left center;
      }
      span:nth-child(1) {
        top: 0px;
        transform: rotate(0deg);
      }
      span:nth-child(2) {
        top: 9px;
        opacity: 1;
      }
      span:nth-child(3) {
        top: 18px;
        transform: rotate(0deg);
      }
      .line {
        transform-origin: left center;
      }
      .line:nth-child(1) {
        top: 1px;
        transform: rotate(45deg);
      }
      .line:nth-child(2) {
        top: 9px;
        opacity: 0;
      }
      .line:nth-child(3) {
        top: 16px;
        transform: rotate(-45deg);
      }

• html

    <div class="box" onclick="clickBox()">
      <span></span>
      <span></span>
      <span></span>
    </div>

• JS

	const lines = document.querySelectorAll("span");
      let status = false;
      function clickBox() {
        lines.forEach((item) => {
          if (status === false) {
            item.setAttribute("class", "line");
          } else {
            item.setAttribute("class", null);
          }
        });
        status = !status;
      }