unbind并绑定特定屏幕宽度上的click事件

时间:2017-08-16 17:01:09

标签: jquery

即使在特定的屏幕宽度上,我也试图绑定和解除绑定。当页面以小于768px的屏幕宽度开始时,单击事件的工作方式应该如此。当我将其调整到更大的屏幕时,click事件是非绑定的,就像它应该但是当我将屏幕调整回小于768px时,我的点击事件不能像我想要的那样工作。有什么建议吗?

 $(document).ready(function() {     
      $(".custom-filter").click(function(){
          $(".fa").toggle();
          $("#test").slideToggle("slow");
      });  

      // I want to bind and unbind this click event 
      $("div.filter-group-shop-by-collecti h4").bind("click", (function () {
          $("ul.nav-shop-by-collecti").slideToggle("slow");
      }));      

      $(window).on('resize', function(){
            var win = $(this);
            if (win.width() >= 768) { 
                $("div.filter-group-shop-by-collecti h4").unbind("click");
            } else {
                $("div.filter-group-shop-by-collecti h4").bind("click");
            }      
      });   
});

1 个答案:

答案 0 :(得分:0)

我明白了!

    $(document).ready(function() {     
  $(".custom-filter").click(function(){
      $(".fa").toggle();
      $("#test").slideToggle("slow");
  });  

  function toggleSlideShow(){
    $("ul.nav-shop-by-collecti").slideToggle("slow");
  }


  $(window).load(function() {
      if($(window).width() >= 768) {
          $("div.filter-group-shop-by-collecti h4").unbind();
      }
  });  

  // I want to bind and unbind this click event 
  $("div.filter-group-shop-by-collecti h4").bind("click", toggleSlideShow);      

  $(window).on('resize', function(){
        var win = $(this);
        if (win.width() >= 768) { 
            $("div.filter-group-shop-by-collecti h4").unbind();
        } else {
            $("div.filter-group-shop-by-collecti h4").unbind();
            $("div.filter-group-shop-by-collecti h4").bind("click", toggleSlideShow);
        }      
  });    
});