我有这个有反应的布局。我想要实现的是,在“桌面”大小,一旦一个菜单链接被点击,它将导航到该部分的页面。我想要和“手机”一样的尺寸。此外,一旦菜单链接被点击,菜单将slideUp。
这两件事我都能用,但是只有当页面被重新加载时,它才能工作。总之,以下是问题所在:
我为此创建了一个jsFiddle。这是我的代码:
HTML
<div id="head" class="clearfix">
<a href="#" title="Pull Menu" id="pull">Pull Menu</a>
<div class="menu-wrap clearfix">
<div class="nav">
<ul>
<li><a href="#test1" title="test1">test1</a></li>
<li><a href="#test2" title="test2">test2</a></li>
<li><a href="#test3" title="test3">test3</a></li>
</ul>
</div>
</div>
</div>
<div id="test1" class="section">Test1</div>
<div id="test2" class="section">Test2</div>
<div id="test3" class="section">Test3</div>
JavaScript
var respMenu = function(event) {
var menu = $('.menu-wrap');
if ($(window).width() < 501) {
$("#pull").on('click', function() {
menu.slideToggle('slow');
});
$(".nav ul li a").click(function() {
menu.slideUp('slow');
});
}
else{
}
return false;
event.preventDefault();
};
var onClick = function() {
$('a').bind('click',function(event){
var $anchor = $(this);
if ($(window).width() > 500) {
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 90 }, 1000,'easeInOutExpo');
}
else{
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 50 }, 1000,'easeInOutExpo');
}
event.preventDefault();
});
};
$(window).load(function(){
respMenu();
onClick();
});
$(window).resize(function(){
respMenu();
onClick();
});
发布于 2014-08-14 00:46:07
问题是,每次调整window
大小时,都会将一个新的处理程序绑定到click事件,而且永远不会解除它们的绑定。因此处理程序的数量不断增加,这意味着一旦您重新调整窗口的大小,就会在单击之后触发多个事件。
因此,您可以做的是使用unbind
或off
方法解除对处理程序的绑定。
https://stackoverflow.com/questions/25302031
复制相似问题