Question

我遇到以下问题：菜单应该在移动设备上打开/关闭，所以我做了if-query，如果浏览器宽度小于x，然后脚本应该出现，所以它看起来像这样：

cusum()

虽然有效，但$(window).resize(function() { var mobilewidth = $(window).width(); if(mobilewidth < 873 ) { $(".mod_customcatalogfilter h2").click(function() { $(".filterform").slideToggle(); }); } else { $(".filterform").removeAttr("style"); } });会反复弹跳并关闭。

您可以在此处看到它：http://codepen.io/Sukrams/pen/WwjejP

有人知道为什么会这样吗？

Answer 1

每次调整大小时都会绑定事件。它不会覆盖现有的actionListener，但会添加另一个。快速且无法解决的问题是每次都解开（）事件。

if(mobilewidth < 873 ) {
    $(".mod_customcatalogfilter h2").unbind();
    $(".mod_customcatalogfilter h2").click(function() {
        $(".filterform").slideToggle();
    });
} else {
    $(".mod_customcatalogfilter h2").unbind();
    $(".filterform").removeAttr("style");
}

更好，更高效的是事先缓存变量，只绑定事件一次。

var $filter = $(".mod_customcatalogfilter h2");
var mobilewidth = $(window).width();
$filter.on('click', function() {
    if (mobilewidth < 873) {
      $(".filterform").slideToggle();
    } else {
      $(".filterform").removeAttr("style");
    }
});
$(window).resize(function() {
  mobilewidth = $(window).width();
});

Answer 2

每次调整窗口大小时，都会创建一个新的单击事件侦听器，因此每次单击触发x次的事件侦听器时（在873下调整窗口大小的次数）。所以基本上你解决方案是不创建事件监听器点击一次以上。

一个选项是 -

var isEventListenerCreated = false;
$(window).resize(function() { 

    var mobilewidth = $(window).width();

    if(mobilewidth < 873 && isEventListenerCreated === false) {
       isEventListenerCreated = true;
        $(".mod_customcatalogfilter h2").click(function() {
            $(".filterform").slideToggle();
        });
    } else {
        $(".filterform").removeAttr("style");
    }
    });

另一种选择是每次窗口调整大小超过873时取消绑定事件监听器。

SlideToggle永久打开/关闭

2 个答案: