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

时间:2014-08-14 07:07:50

标签: javascript jquery

我有这种响应式布局。我想要达到的目标是"桌面"大小,单击菜单链接后,它将导航到页面的该部分。对于"移动"我想要同样的事情。尺寸。此外,单击菜单链接后,菜单将会滑动。

我有这两件事都有效,但只有在重新加载页面时它才有效。总而言之,以下是问题:

  1. 在桌面尺寸:导航很好,但在调整为移动设备时,菜单无法显示。
  2. 在手机大小:导航工作正常,当调整大小到桌面时,它也可以正常工作,但菜单继续切换。
  3. 我为它创建了一个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();
    });
    

1 个答案:

答案 0 :(得分:0)

问题在于,每次重新调整window大小并且永远不解除绑定时,都会将新处理程序绑定到click事件。因此处理程序编号不断增加,这意味着一旦您重新调整窗口大小,就会触发多个事件。

所以你可以做的是使用unbindoff方法取消绑定处理程序。

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