toggleClass在调整浏览器窗口大小时触发两次
问题描述:
我目前正在创建响应式导航。我已经设法完成并尝试解决一个问题。每当我尝试调整浏览器大小时,似乎toggleClass似乎会多次触发。如果刷新浏览器,它可以正常工作,但是在调整大小后,它似乎一次点击就会触发几次。toggleClass在调整浏览器窗口大小时触发两次
这是我一直在努力的代码。
的jsfiddle - https://jsfiddle.net/kvpyzbxr/1/
<script>
$(document).ready(function() {
function detectMobile() {
if ($(window).width() < 1080) {
$('header').addClass('mobile');
$('.secondary-navigation').insertAfter('.primary-navigation');
}
else {
$('header').removeClass('mobile');
$('.secondary-navigation').insertBefore('.primary-navigation');
}
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
}
detectMobile();
$(window).resize(function() {
detectMobile();
})
})
</script>
header {
max-width: 1336px;
margin: 0 auto;
}
header .navigation {
padding: 10px 0;
clear: both;
}
header .navigation li {
padding: 10px;
display: inline-block;
position: relative;
font-family: 'Arial', sans-serif;
background-color: #272041;
color: #fff;
float: left;
}
header .navigation li a {
color: #fff;
}
header .navigation li ul {
position: absolute;
top: 0;
left: 0;
padding-top: 30px;
display: none;
}
header .navigation li ul li {
background-color: #231d39;
color: #95939e;
}
header .navigation li:hover ul {
display: block;
}
header.mobile .navigation li {
display: block;
float: none;
}
header.mobile .navigation li ul {
position: static;
display: none;
height: 0;
}
header.mobile .navigation li.expand-menu ul {
height: initial;
display: block;
}
答
那是因为你几次添加单击事件。每次调用detectMobile()
时,都会将点击事件绑定到$('.navigation li')
。所以只需移动
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
以外的detectMobile()
功能。
您可能想要将jQuery添加到您的小提琴中以帮助其他人诊断您的问题。 –
尝试将调整大小功能放在'$(document).ready()'外部 – sideroxylon