Jquery 滑动切换永久打开/关闭

我有以下问题：移动设备上的菜单应该打开/关闭，所以我做了一个if查询，如果浏览器宽度小于大小x，那么脚本应该出现，所以它看起来像这样：

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

$（窗口）。调整大小（函数（）{
var mobilewidth=$（window.width（）；
如果（移动宽度<873）{
$（“.mod_customcatalogfilter h2”）。单击（函数（）{
$（“.filterform”）.slideToggle（）；
});
}否则{
$（“.filterform”）.removeAttr（“样式”）；
}
});

它可以工作，但

.filterform

会上下反弹，然后关闭

在这里，您可以看到它的作用：

---

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

每次调整窗口大小时，都会创建一个新的单击事件侦听器，因此每次单击事件侦听器都会触发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");
    }
    });

var isEventListenerCreated=false；
$（窗口）。调整大小（函数（）{
var mobilewidth=$（window.width（）；
如果（mobilewidth<873&&isEventListenerCreated==false）{
isEventListenerCreated=true；
$（“.mod_customcatalogfilter h2”）。单击（函数（）{
$（“.filterform”）.slideToggle（）；
});
}否则{
$（“.filterform”）.removeAttr（“样式”）；
}
});

---

另一个选项是，每次窗口大小调整到大于873时，都要解除事件侦听器的绑定。

每次调整大小时都要绑定事件。它不会覆盖现有的actionListener，而是向其添加另一个。快速而不完美的解决方案是每次都取消绑定（）事件

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

if（移动宽度<873）{
$（“.mod_customcatalogfilter h2”）.unbind（）；
$（“.mod_customcatalogfilter h2”）。单击（函数（）{
$（“.filterform”）.slideToggle（）；
});
}否则{
$（“.mod_customcatalogfilter h2”）.unbind（）；
$（“.filterform”）.removeAttr（“样式”）；
}

更好、更高效的方法是预先缓存变量，只绑定一次事件

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();
});

var$filter=$（“.mod_customcatalogfilter h2”）；
var mobilewidth=$（window.width（）；
$filter.on（'click'，function（）{
如果（移动宽度<873）{
$（“.filterform”）.slideToggle（）；
}否则{
$（“.filterform”）.removeAttr（“样式”）；
}
});
$（窗口）。调整大小（函数（）{
mobilewidth=$（窗口）.width（）；
});

我正在使用您的解决方案，但现在发现一个新问题：当页面加载时，它不会出现在我的智能手机（iphone 6）上，我必须向下滚动，以便调整浏览器的大小。它是否可以被修复，以便在加载页面时显示，因为问题是，用户可以在向下滚动页面时单击导航。只需在加载屏幕时使用与调整大小事件中使用的相同功能，这样做第二个棘手的解决方案甚至不会导致此问题，因为我在之前绑定了事件，而不是在重新发布时。但两天后你还是接受了他的回答。