javascript - ウィンドウのサイズ変更イベントの中断は、サイズ変更後にトグルします

Question

以下のコードに問題があります。トグル div のウィンドウ サイズ変更イベントを作成しました。目的は、小さなデバイスでヘッダーがコンテンツを切り替えるときです。それ以外の場合、コンテンツはそのまま表示されます。私が抱えている問題は、ページを更新すると完璧に機能することです。2 番目にサイズを変更してクリックして切り替えると、ある種の再帰呼び出しが 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();