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

我对下面的代码有问题。我为toggle div创建了一个窗口大小调整事件。目的是在较小的设备上，标题将切换内容，否则内容将按原样显示。我遇到的问题是，当我刷新页面时，它工作得非常完美。第二次我调整它的大小并点击切换，它会导致某种递归调用5次，所以它会前后切换5次。有什么建议吗

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

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

}).resize();

---

不建议在调整大小函数中插入单击函数，因为每次调整大小时都会将单击函数添加到标记中。如果在单击行之前向“打开器”添加取消绑定，则该操作应有效

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

}).resize();

---

很好，非常感谢。所以我明白了，这到底是如何解决问题的？每次调整大小都是在向元素添加相同的函数，例如，如果调整大小5次，那么函数将被调用5次。“解除绑定”的作用是删除它以前拥有的所有附加事件处理程序，就像在添加函数之前清理它一样，所以这次它只触发一次。