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

Question

所以，我有一个汉堡包菜单按钮，单击它会打开一个 <ul>但也将 3 行更改为 X(使用激活第二组 CSS 变量的 JQuery 切换)。再次单击时，<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

只需删除调整大小事件中的类即可。

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>标记，因为它可能会产生一些错误。