javascript - 调整大小后窗口调整大小事件中断切换

Question

我对以下代码有疑问。我为切换 div 创建了一个窗口大小调整事件。目的是在较小的设备上，标题将切换内容，否则内容将按原样显示。我遇到的问题是当我刷新页面时，它运行良好。第二次我调整它的大小并单击切换，它会导致某种递归调用 5 次，因此它来回切换 5 次。有什么建议么？

$(window).resize(function() {
if ($(window).width() > 767) {
  $(".toggle" ).show();
}
else {
  $(".toggle" ).hide();

      $( ".opener" ).click(function() {
    $(this).next('.toggle').slideToggle();
  });
}

}).resize();

Answer 1

不建议在调整大小函数中插入点击函数，因为每次调整大小时都会向标签添加点击函数。如果您在点击线之前将取消绑定添加到“开启器”，它应该可以工作。

$(window).resize(function() {
   if ($(window).width() > 767) {
   $(".toggle" ).show();
}
else {
   $(".toggle" ).hide();
   $( ".opener" ).unbind("click");  
   $( ".opener" ).click(function() {
     $(this).next('.toggle').slideToggle();
   });
}

}).resize();