调整大小后，窗口重新调整大小事件会中断切换

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