除非重新加载页面，否则Window.resize不起作用

Question

我有这种响应式布局。 我要实现的是在“桌面”大小下，一旦单击菜单链接，它将导航到页面的该部分。 我希望“移动”尺寸也一样。 同样，一旦单击菜单链接，菜单就会向上滑动。

我可以同时使用这两种方法，但是仅在重新加载页面时才能使用。 总结一下，这是问题所在：

1. 在桌面大小下：导航很好，但是在调整大小以移动时，菜单不会显示。
2. 在移动设备尺寸下：导航正常，将其调整为桌面大小时也可以正常运行，但菜单会一直切换。

我为此创建了一个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();
});

Answer 1

问题是，每次调整window大小时，您都将新的处理程序绑定到click事件，而从未取消绑定它们。 因此，处理程序的数量不断增加，这意味着在您重新调整窗口大小后，单击一次会触发多个事件。

因此，您可以使用unbind或off方法来取消绑定处理程序。

在这里看看： http : //jsfiddle.net/yohanrobert/p987prdd/