首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >除非重新加载页面,否则Window.resize无法工作

除非重新加载页面,否则Window.resize无法工作
EN

Stack Overflow用户
提问于 2014-08-14 07:07:50
回答 1查看 404关注 0票数 0

我有这个有反应的布局。我想要实现的是,在“桌面”大小,一旦一个菜单链接被点击,它将导航到该部分的页面。我想要和“手机”一样的尺寸。此外,一旦菜单链接被点击,菜单将slideUp。

这两件事我都能用,但是只有当页面被重新加载时,它才能工作。总之,以下是问题所在:

  1. 在桌面大小:导航是好的,但当调整大小的移动菜单没有显示。
  2. 在移动大小:导航工作很好,当调整到桌面时,它也可以工作,但菜单继续切换。

我为此创建了一个jsFiddle。这是我的代码:

HTML

代码语言:javascript
运行
复制
<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

代码语言: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();
});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-14 08:46:07

问题是,每次调整window大小时,都会将一个新的处理程序绑定到click事件,而且永远不会解除它们的绑定。因此处理程序的数量不断增加,这意味着一旦您重新调整窗口的大小,就会在单击之后触发多个事件。

因此,您可以做的是使用unbindoff方法解除对处理程序的绑定。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25302031

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档