所以,我有一个汉堡包菜单按钮,单击它会打开一个 <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);
}
在此先感谢您提供的任何帮助。
最佳答案
只需删除调整大小事件中的类即可。
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>
标记,因为它可能会产生一些错误。
关于javascript - 如何在调整大小时删除类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24981507/