Question

我正在使用css媒体查询和jQuery。一旦屏幕大小为767px，我希望它运行jQuery点击功能。但是，一旦屏幕宽度大于767px，我该如何停止jQuery点击功能？这是我的代码：

jQuery的：

$(document).ready(function() {
$(".custom-filter").click(function(){
    $(".fa").toggle();
    $("#test").slideToggle("slow");
});
$("div.filter-group-shop-by-collecti h4").click(function(){
    $("ul.nav-shop-by-collecti").slideToggle("slow");
}); 
$("div.filter-group-shop-by-shoe h4").click(function(){
    $("ul.nav-shop-by-shoe").slideToggle("slow");
});
$("div.filter-group-price h4").click(function(){
    $("ul.nav-price").slideToggle("slow");
});
$("div.filter-group-size h4").click(function(){
    $("ul.nav-size").slideToggle("slow");
}); 
});

CSS：

@media only screen and (max-width: 767px) { 
.custom-filter {
  border: 1px solid #bcbcbc;
  display: inline-block;
  padding: 5px 20px 5px 15px;
  color: black;
  font-size: 17px;
  border-radius: 2px;
}

div#test.filter-menu {
  display: none;
} 

ul.nav-shop-by-collecti  {
  display: none; 
}

ul.nav-shop-by-shoe  {
  display: none;
}

ul.nav-price  {
  display: none;
}

ul.nav-size  {
  display: none;
}

.fa-chevron-down {
  font-size: 10px;
  font-weight: normal;
}
.fa-chevron-up {
  font-size: 10px;
  font-weight: normal;
  display: none;
}

.sidebar-cont.cf {
  position: relative;
  bottom: 30px; 
}
}

一旦大于767px，我希望禁用点击功能。

Answer 1

将此条件添加到事件处理程序：

if(window.innerWidth <= 767)

Answer 2

您需要使用$(window).width()将事件中的条件设置为check for the screen width，如果您仍希望在屏幕大于您的值时完全取消绑定事件，则您将使用{{1 }和here you will find good examples。
只要考虑屏幕尺寸再次小于767px的情况，你应该重新绑定事件吗？或者在这种情况下，事件中的检查宽度条件是否足够？

Answer 3

这是使用jQuery的解决方案：

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

function screenTooBig() {
  if ($(window).width() >= 767) {
    return true;
  }
    return false;
}

此外，您可以使用window.resize来捕获屏幕大小调整：

window.onresize = function() {
  if (screenTooBig()) {
    ...
  }
}

Answer 4

我建议创建一个事件监听器，用document.body.clientWidth检查窗口的宽度，然后在检查该值小于768的条件下运行代码：

var check_size = function() {
  width = document.body.clientWidth;
  if (width > 768) {
    $(".custom-filter").click(function() {
      $(".fa").toggle();
      $("#test").slideToggle("slow");
    });
    $("div.filter-group-shop-by-collecti h4").click(function() {
      $("ul.nav-shop-by-collecti").slideToggle("slow");
    });
    $("div.filter-group-shop-by-shoe h4").click(function() {
      $("ul.nav-shop-by-shoe").slideToggle("slow");
    });
    $("div.filter-group-price h4").click(function() {
      $("ul.nav-price").slideToggle("slow");
    });
    $("div.filter-group-size h4").click(function() {
      $("ul.nav-size").slideToggle("slow");
    });
  }
}

// Ensure the function runs whenever the window is resized
window.addEventListener("resize", check_size);


// Launch the function on page load as well
$(document).ready(function() {
  check_size();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望这有帮助！：）

当jQuery点击函数大于特定的屏幕宽度时，如何停止它？

4 个答案: