Question

所以，我有一个汉堡菜单按钮，当点击它时，会打开一个<ul>，但也会将3行更改为X（使用JQuery切换激活第二组CSS变量）。再次单击时，<ul>消失，X变回原始变量集（3行）。我还设置了它，以便在列表打开时调整页面大小，列表关闭，我试图使其调整，以便调整大小更改按钮更改回原始的CSS变量集（即线）。

这是JS和JQuery：

<script>
      window.onload = function(){
        document.querySelector('#menu-icon').addEventListener('click',function(){
          this.classList.toggle('active');
        });
        $(window).on('resize',function(){
             $("#menu-mobile").hide();

        });
      };
    </script>
    <script src="scripts/jquery.js"></script>
    <script type="text/javascript">
      $('#menu-icon').click(function(){
        $("#menu-mobile").slideToggle("medium");     
      });
    </script>

这是CSS：

#menu-icon {
    margin-top: 27px;
    margin-right: 4px;
    padding: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    text-align: center;
  }
  #menu-icon > span {
    display: block;
    margin-top: 6px;
    border-top: 3px solid #666;
    position: relative;
    -webkit-transition: all 0.2s cubic-bezier(.15,1.43,.46,1.25);
    transition: all 0.2s cubic-bezier(.15,1.43,.46,1.25);
    margin: inherit auto;
  }
  #menu-icon:hover > span {
    border-top: 3px solid #333;
  }
  #menu-icon.active > .ln-one {
    -webkit-transform-origin: top left;
    -webkit-transform: rotate(45deg);
    -ms-transform-origin: top left;
    -ms-transform: rotate(45deg);
    transform-origin: top left;
    transform: rotate(45deg);
  }
  #menu-icon.active > .ln-two {
    border-color: transparent;
  }
  #menu-icon.active > .ln-three {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-45deg) translateY(6px) translateX(-6px);
    -ms-transform-origin: left bottom;
    -ms-transform: rotate(-45deg) translateY(6px) translateX(-6px);
    transform-origin: left bottom;
    transform: rotate(-45deg) translateY(6px) translateX(-6px);
  }

提前感谢您提供的任何帮助。

Answer 1

也可以删除resize事件上的类。

<强>的jQuery

$(window).on('resize',function(){
     $("#menu-mobile").hide();
     $('#menu-icon').removeClass('active');
});

或通过 classList API

$(window).on('resize',function(){
     $("#menu-mobile").hide();
     document.querySelector('#menu-icon').classList.remove('active');
});

最好将jquery.js放在所有其他<script>代码之前，因为它可能会产生一些错误。

如何在调整大小时删除类？

1 个答案: