I have this responsive layout. What I want to achieve is that at "desktop" size, once a menu link is clicked it will navigate to that part of the page. I want the same thing for "mobile" size. Also, once the menu links are clicked, the menu will slideUp.
I have both of these things working, however it only works when the page is reloaded. To summarize, here are the problems:
I created a jsFiddle for it. Here is my code:
<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>
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();
});
The issue is that you bind a new handler to the click event each time your window
is re-sized and you never unbind them. So the handlers number keep increasing, which means that multiple events will be fired after a click once you've re-sized the window.
So what you can do is to unbind the handlers using the unbind
or off
methods.
Take a look here: http://jsfiddle.net/yohanrobert/p987prdd/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.