Bootstrap4でdrawer.jsを使うときの注意点(ドロップダウン)

ドロワーメニュー(ハンバーガーメニュー)を使いたい場合に活躍するdrawer.jsですが、Bootstrap4には対応していない模様。

ドロワー内でドロップダウンをする場合には、class属性について”open“の付与と削除をコードで操作する必要がありそうです。

$(document).ready(() => {
  $('.drawer').drawer();
  $('a.drawer-dropdown-toggler').on('click', e => {
    let item = $(e.currentTarget);
    let p = item.parent();
    let cn = p.attr('class');
    if (cn.includes('open')) {
      p.removeClass('open');
    } else {
      p.addClass('open');
    }
  });
});

簡単にいえば、ハンバーガー(アイコン)がクリックされるたびに”open“を足したり引いたりします。
Bootstrap3までは”open”で処理されていたclassがBootstrap4では”show”にされたのが原因の模様。

Link