jQuery slidetoggle resize での連発の改善

Question

レスポンシブデザインで、モバイルサイズに移行した時にヘッダーメニューをドロップダウンに変更したくslidetoggleを適用したいのですが、窓幅をresizeしたときに開閉が連発しています。
さらに、モバイルサイズから上のサイズへリサイズしたときにメニューが消えてしまいます。

過去の回答をみてみましたがいまいちわかりませんでした、、、

解決方法がわかる方、ご教授願えませんでしょうか？

コード
//Toggle does not work well when Win is resized.
  $(window).resize(function(){
    var wsize = $(window).width();
    var mobilesize = 750;
    if(wsize <= mobilesize){
      $('.header-list').slideToggle();
    }else{
      $('.header-list').show();
    }
  });

  var wsize = $(window).width();
  var mobilesize = 750;
  if(wsize <= mobilesize){
    $('.dropdown').click(function(){
      $('.header-list').slideToggle();
    });
  }

コード
.header-list{
  /* モバイル以外の適用 */
  font-family: Avenir-LightOblique;
  font-size: 16px;
  text-align: left;
  position: absolute;
  top: 12px;
  margin-left: 100px;
  letter-spacing: 3px;
}

/* モバイル時の　@media */
  .header-list{
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    width: 120px;
    height: 160px;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .header-list li{
    display: block;
    padding: 1em 0 1em 1em;
  }

Answer 1

まず窓枠をリサイズした時に開閉が行われる事象ですが、
$(window).resize(function(){}) はwindowサイズをリサイズ（変更）するたびにイベントが発火します。
なので下記の場合はwindowサイズが750px以下の場合にwindowをリサイズ（変更）した場合はif文の中身の処理が実行されるのでドロップダウンメニューが開閉され続けます。

  $(window).resize(function(){
    var wsize = $(window).width();
    var mobilesize = 750;
    if(wsize <= mobilesize){
      $('.header-list').slideToggle();
    }else{
      $('.header-list').show();
    }
  });

ドロップダウンの見た目の制御はJavascriptで行うのではなくメディアクエリーで制御し、
スライドトグルの処理はクリックイベントで制御すれば良いと思います。
上記のコードを削除すればリサイズ時の開閉問題は解決されます。

Comments

[mogiruri]

easy_no_easy 様
ご回答ありがとうございます。リサイズからトグルを外すことで暴発を解消できました！リサイズの場合は絡む動作を注意していかなければなりませんね、、、

トグルのクリックイベントをリサイズからはずし
$('.dropdown').click(function() {
$('.header-list').slideToggle();
});

モバイル表示でメニューを閉じてから７５０↑にリサイズするとメニューがそのまま閉じ続けてしまう現象があったのですが、下記コードで解消することができました。
$(window).resize(function () {
var wsize = $(window).width();
var mobilesize = 750;
if (wsize > mobilesize && $('.header-list').css('display') == 'none') {
$('.header-list').css('display','block');
}else if (wsize <= mobilesize && $('.header-list').css('display') == 'block') {
$('.header-list').css('display','none');
}
});

長いこと悩んでいたので、解消できて助かりました。この度はアドバイスありがとうございました！