Question

我正在使用enquire.js库将JavaScript媒体查询添加到我正在开发的网站中。

我最初加载网站时会出现问题。

我调整了860px断点，并切换导航。一切正常，正如预期的那样。
然后我调整大小超过860px。
我再次重新调整回860px enquire.js媒体查询。切换导航输出两个控制台消息。

有什么想法吗？

   enquire.register("screen and (max-width:860px)", {

        match : function()
        {   
            nav_wrapper.removeClass('show').addClass('hide');

            nav_toggle.click(function()
            {
                if((nav_wrapper).hasClass('hide'))
                {
                    console.log('It\'s hidden');
                    nav_wrapper.removeClass('hide').addClass('show');
                }
                else
                {
                    console.log('It\'s opened up');
                    nav_wrapper.removeClass('show').addClass('hide');
                }

            });

        },

        unmatch : function()
        {
            nav_wrapper.removeClass('hide').addClass('show');
        },

    });

Answer 1

每次拨打match时，您都会添加新 click处理程序（再次执行nav_toggle.click(function(){ ... })）。他们堆叠起来，他们每个人都会被召唤。因此，在第一次调用match之后，您有一个并且可能获得您期望的行为。第二次调用match后，你有两个，并开始得到错误的行为。在第三次致电match之后，你有三个......

查看您的click处理程序，没有理由这样做，只需将其连接一次（大概在match之外）。

例如：

// Hook up click **once**
nav_toggle.click(function() {
    if (nav_wrapper.hasClass('hide')) {
        console.log('It\'s hidden bud');
        nav_wrapper.removeClass('hide').addClass('show');
    } else {
        console.log('It\'s opedn up mate');
        nav_wrapper.removeClass('show').addClass('hide');
    }

});

// Respond to screen width changes
enquire.register("screen and (max-width:860px)", {

    match: function() {
        nav_wrapper.removeClass('show').addClass('hide');
    },

    unmatch: function() {
        nav_wrapper.removeClass('hide').addClass('show');
    },

});

附注：我删除了()中nav_wrapper周围不必要的if((nav_wrapper).hasClass('hide'))。

jQuery If / Else语句，检查元素是否有类产生两个结果？

1 个答案: