jquery - SlideToggle 永久打开/关闭

Question

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

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

它可以工作，但是 .filterform 上下弹跳然后关闭。

在这里您可以看到它的实际效果:http://codepen.io/Sukrams/pen/WwjejP

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

Answer 1

每次调整大小时都绑定(bind)事件。它不会覆盖现有的 actionListener，但会添加另一个。快速但性能不佳的解决方案是每次都取消绑定(bind)()事件。

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

更好和更高性能的方法是预先缓存变量并且只绑定(bind)一次事件。

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