【サンプルコードあり】ｄrawer.js を使って、ドロワーメニューを作成した時、内部リンクの場合メニューが閉じない現象になるので、それを解消する方法が簡単だった。

ｄrawer.js を使うと　ドロワーメニューを簡単に作成することが可能

今回　drawer.jsで、ページ内リンクをクリックした時、
ページは変化するけど、メニューが開いたままになった。

ドロワーメニューメニューの閉じない場合。

解決方法が見つかったんで記事にしました。

解決方法

解決方法はとても簡単でした。

</script>の前に下記のコード追加でOKでした。

挿入するコード

　$(‘.drawer-menu a’).on(‘click’, function() {
$(‘.drawer’).drawer(‘close’);
});

この３行追加でできました。

もし同じ現象なら使ってみてください。

実際に成功した時のコード

    <script>
      jQuery.noConflict();
      (function ($) {

        $(document).ready(function () {
          $('.drawer').drawer();
          $('.drawer-menu a').on('click', function() {
          $('.drawer').drawer('close');
        });
        });
      })(jQuery);
    </script>

このコードを　</body>　の直前に挿入で解消されました。

drawer.js でドロワーメニューを簡単作成 でもjQueryのプラグインがあると動かない場合ある。【サンプルコードあり】

今回、drawer.js でドロワーメニューが簡単に装着できると効いたので早速実装してみました。実装はほんとに簡単で、head内にdrawer.cssなどを追加、body内に決められたコードを挿入。最後</body>の直前にscriptコー...

inopro.jpn.org

2022.08.19